節流防抖原理及簡單實現

最直觀的是百度的搜索框，肯定不是輸入一個字母就立即查詢，而是等你輸完一小段時間纔會發起請求。

防抖：

基本思路：定義一個定時器，假設延時1000ms，如果你正在輸入內容，定時器不斷刷新，不斷延時1000ms，不觸發請求，當停止輸入時，定時器生效，發送請求

Html：

<input type="text" id="input1" />

JS如下

// 定義防抖函數
function debounce(fn, delay=500) { // （操作函數，延時時間）
    let timer = null;
    
    return function() {
        if (timer) {
            clearTimeout(timer); // timer存在則清除
        }
        
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    }
}

const input = document.getElementById("input1");

input.addEventListener('keyup', debounce(function(){
    console.log(input.value);
}, 1000));

節流：

還是使用定時器，每固定一個時間段觸發一次請求，下面以拖動div，console它的位置爲例

Html：

<div id="drag" draggable="true" style="width: 200px;height: 100px;border: 1px solid #f00;">可拖拽</div>

JS：

// 定義節流函數
function throttle(fn, delay=500) { // 操作函數，延時時間
    let timer = null;

    return function() {
        if (timer) {
            return;
        }

        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay)
    }
}

const drag1 = document.getElementById('drag');

drag1.addEventListener('drag', throttle(function(e) { // 監聽拖拽事件
    console.log(e.offsetX, e.offsetY); // 打印當前位置
}, 1000))