什么是防抖(???)
防抖策略（debounce）是當事件被觸發后，延遲 n 秒后再執行回呼，如果在這 n 秒內事件又被觸發，則重新計時，
防抖的應用場景：如淘寶搜索框，用戶在輸入框連續搜索一行字的時候可以通過防抖策略，知道用戶把搜索內容全部打出才觸發執行請求，這樣可以有效減少請求的次數，節約請求資源
好處：用戶在多次觸發某事件的情況下只會執行最后一次
步驟：
1. 定義一個防抖動的 timer延時器并置空
2.獲取頁面中input DOM元素并系結回車事件
3.先清除延時器，確保連續多次觸發但只執行最后一次定時器
示例代碼：
<body>
<!-- 用戶要進行輸入的input框 -->
<input type="text" name="" id="inp">
<script>
// 第一步：定義一個防抖動的timer延時器并置空
var timer = null;
var count = 0; //count用于統計被觸發的次數
// 獲取頁面中input DOM元素并系結回車事件
document.querySelector('#inp').addEventListener('keyup', function() {
// 先清除定時器，確保連續多次觸發但只執行最后一次定時器
if (timer) clearInterval(timer)
timer = setTimeout(function() {
count++
console.log('我被觸發了' + count + '次');
}, 1000)
})
</script>
</body>效果圖：
什么是節流(???)
節流策略（throttle）可以減少一段時間內事件的觸發頻率，
節流的應用場景
① 滑鼠連續不斷地觸發某事件（如點擊），只在單位時間內只觸發一次；
② 懶加載時要監聽計算滾動條的位置，但不必每次滑動都觸發，可以降低計算的頻率，而不必去浪費 CPU 資源；
效果： 圖片跟隨滑鼠移動
步驟：
1. 定義一個timer節流閥
2.定義一個延時器
3.如果節流閥不為空設定了滑鼠跟隨效果后，清空timer節流閥，方便下次開啟延時器
4.判斷節流閥是否為空，如果不為空（上次的代碼還沒執行完）就return等待執行完畢
示例代碼：
<body>
<img src="angel.gif" alt="" id="angel">
<script>
// 1.定義一個timer節流閥
var timer = null;
$(document).on('mousemove', function(e) {
// 3.判斷節流閥是否為空，如果不為空則上次的代碼還沒執行完
if (timer) {
return
}
// 2.定義一個延時器
timer = setTimeout(function() {
$('#angel').css({
'left': e.pageX - 40 + 'px',
'top': e.pageY - 40 + 'px'
})
// 2.如果節流閥不為空設定了滑鼠跟隨效果后，清空timer節流閥，方便下次開啟延時器
timer = null;
}, 16)
})
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/336260.html
標籤：其他
上一篇：vue讀取外部組態檔