js 节流 - 爱码网

节流

节流原理：规定时间内只执行一次，它与防抖的最大区别是，即使再高频的动作在规定的时间内都会执行一次。

如节流中提到的输入内容进行搜索的问题，使用防抖如果输入特别频繁，则不会发送请求，只有等输入停止时才会发送请求

而节流则在规定的时间内都会发送一次请求

js代码：

var text = document.getElementById('write');
function trol(fn,delay){
    var pre = new Date();
    return function () {
        var now = new Date();
        if(now-pre >= delay){
            fn();
            pre = new Date();
        }
    }
}
function write(){
    console.log(text.value);
}
text.addEventListener('input',trol(write,5000))

效果：

js 节流

可以看到无论输入的速度是什么样的，都会每隔5秒发送一次请求