JS的防抖与节流记录

在做毕设的时候遇到的一个问题，需求如下：

• 需要能够支持用户无限刷赞的功能
• 后台需要能够处理的过来

一开始的思路(keng); 点一下调用一下后台更新接口，对相关表信息更新，【但狂点时后台会爆炸，前端明显延迟等待后端处理】

之后改思路(keng×2)，在用户一顿疯狂操作后，鼠标离开时才去调用一次后台更新接口（接口已改，支持提交点击次数）【但鼠标离开事件还是会很多，想着离开页面时触发(keng×3），但浏览器支持不好】

最后问了一个前端同事，人家一语道破天机——“防抖节流嘛！！”

o(╥﹏╥)o，学JS的时候，“似乎”学过，但不知道其应用场景，看来以后学任何技术都要先了解其场景用途，具体实现可整理成笔记才是长久大计啊。

自己的实现代码：

$(function () {
            var pclick_num1 = 0;
            var pclick_num2 = 0;
            var timer = null
            // 赞
            $("#like").click(function () {
                $.tipsBox({
                    obj: $(this),
                    str: "+ 1",
                    color: "#73fa0a",
                    callback: function () {
                        //alert(5);
                    }
                });
                isclick = true;
                pclick_num1 += 1;        
                setUpdate(1, pclick_num1)  // 防抖更新
            });
            // 踩
            $("#nlike").click(function () {
                $.tipsBox({
                    obj: $(this),
                    str: "- 1",
                    color: "#cd3d1f",
                    callback: function () {
                    }
                });
                pclick_num2 += 1;
                setUpdate(0, pclick_num2)   // 防抖更新
            });
            // 防抖节流
            function setUpdate(type, num) {
                timer && window.clearTimeout(timer)
                timer = setTimeout(function () {
                    share_like(type, num)  // 调用接口
                }, 500)
            }
        });

借鉴整理网上实现的代码：

函数防抖：

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

/**
 * 防抖函数
 * @param method 事件触发的操作
 * @param delay 多少毫秒内连续触发事件，不会执行
 * @returns {Function}
 */
function debounce(method,delay) {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(self,args);
        },delay);
    }
}

window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},200)

 函数节流

定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

/**
 * 节流函数
 * @param method 事件触发的操作
 * @param mustRunDelay 间隔多少毫秒需要触发一次事件
 */
function throttle(method, mustRunDelay) {
    let timer,
        args = arguments,
        start;
    return function loop() {
        let self = this;
        let now = Date.now();
        if(!start){
            start = now;
        }
        if(timer){
            clearTimeout(timer);
        }
        if(now - start >= mustRunDelay){
            method.apply(self, args);
            start = now;
        }else {
            timer = setTimeout(function () {
                loop.apply(self, args);
            }, 50);
        }
    }
}
window.onscroll = throttle(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},800)

多读多写，见多识广，识大局，观趋势，处身不败之地，方可全身而退。