JavaScript函数的防抖和节流

在前端开发中，经常会给元素添加一些事件，例如：click、scroll、input、mousemove。

这些事件会存在一些隐患，比如点击事件，用户点击时可能手抖连续点击了两次。

或者点击后发现没反应，频繁的点击按钮。

按钮一般都会与我们的后台服务有交互功能，请求数据接口等等。

如果像用户的操作一样，频繁去向服务器发送请求，这会占用很多不必要的资源，甚至出现bug。

防抖

函数防抖，如字面意思一样，防止用户手抖，多次点击，但是事件只需执行一次。

第一种： 快速点击时，只触发一次，然后停止点击一段时间后才能再次点击触发。

function fdFun(cb){
    let timeid; // 定时器id
    return function(){
        let curentFlag = !timeid; // 是否初始化了定时器，取反
        if(timeid) clearTimeout(timeid); // 如果定时器存在，则清除
        timeid = setTimeout(function(){ // 初始化定时器
            timeid = null; // 1s后，清空
        },1000);
        if(curentFlag){ // 如果没有定时器等待，就执行回调
            cb();
        }
    }
}
// 快速点击，1s内也只执行一次
document.querySelector('#btn').onclick = fdFun(function(){
    console.log('do something...');
});

第二种：快速点击不触发，最后一次点击停止后一段时间触发。

function fdFun(cb){
    let timeid;
    return function(){
        if(timeid) clearTimeout(timeid);
        timeid = setTimeout(function(){
            cb();
        },1000);
    }
}

节流

函数节流，意思是函数按照 一定时间规律执行，比如：快速点击时，每过1秒执行一次。

第一种：使用定时器实现

function jlFun(cb){
    let timeid;
    return function(){
        if(!timeid){ // 如果没有定时器等待就执行
            timeid = setTimeout(function(){ // 初始化定时器
                cb(); // 1s后执行回调
                clearTimeout(timeid); // 1s后清除定时器
                timeid = null; // 1s后将定时器id清空
            },1000);
        }
    }
}
document.querySelector('#btn').onclick = jlFun(function(){
    console.log('do something...');
});

第二种：使用时间戳记录实现

function jlFun(cb){
    let beforeTime = new Date(); // 记录下时间戳
    return function(){
        let waitTime = 1000; // 需等待的时间
        let nowTime = new Date(); // 当前点击时间戳
        if(nowTime - beforeTime >= waitTime){ // 当点击时的时间戳，大于等待时间则执行
            cb();
            beforeTime = nowTime; // 将上一次执行的时间，设置为这一次触发的时间戳
        }
    }
}
document.querySelector('#btn').onclick = jlFun(function(){
    console.log('do something...');
});

公众号【前端很忙】