JS的防抖与节流记录

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

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

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

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

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

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

JS的防抖与节流记录_第1张图片

自己的实现代码:

$(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)

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

你可能感兴趣的:(Web,HTML5)