节流防抖原理及简单实现

最直观的是百度的搜索框，肯定不是输入一个字母就立即查询，而是等你输完一小段时间才会发起请求。

防抖：

基本思路：定义一个定时器，假设延时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))