防抖和节流

理论知识:

防抖debounce:多次触发,只执行最后一次。input输入框

节流throttle:规定时间内,只执行一次。鼠标滚轮滚动

参考链接:防抖和节流——博客

代码:

     /**
     * js防抖
     * @param fn
     * @param wait
     * @returns {Function}
     */
    debounce: function (fn, wait) {
        var timeout = null;
        return function () {
            // 保存函数调用时的上下文和参数,传递给 fn
            var context = this;
            var args = arguments;
            if (timeout !== null) clearTimeout(timeout);
            timeout = setTimeout(function () {
                fn.apply(context, args);
            }, wait);
        }
    },
    throttle: function (action, delay) {
        var statTime = 0;
        return function () {
            var currTime = +new Date();
            if (currTime - statTime > delay) {
                action.apply(this, arguments);
                statTime = currTime;
            }
        }
    },

写到这儿,以上就是简略的防抖和节流。

以下是详细的防抖和节流,可选看:

防抖和节流:

节流与防抖的作用都是防止函数多次调用。区别在于,假如用户一直触发这个函数,且每次触发函数的间隔小于阙值,防抖的情况下只会调用一次,而节流会每隔一定时间调用函数。

防抖:

防抖核心思路:就是建立一个定时器,先清除定时器,随后再开一个定时器,指定时间后执行函数。这就实现了一个简易的防抖,指定时间内重复触发函数只会执行一次。已经很好的解决了高频重复触发的问题。

使用案列:

        //获取短信验证码

        let getYzm = GlobalUtils.debounce(Login.getYzm, 300)

备注:因为调取使用debounce函数,this与event均丢失了。

1.先解决this指向问题,正常在function函数中,this指向的应该是调用函数的对象,也就是getYzm ,因为在debounce中返回了一个匿名函数,形成了一个闭包,导致this丢失。指定this指向的方法有apply与call,用法差别只在参数,call需要的是一个数组,这里就用apply。

2.解决event参数,正常在function函数中有一个event,指向当前的事件对象。因为debounce函数返回的是一个匿名函数,可以通过arguments属性来获取参数,该属性是一个由函数参数组成的类数组

 

防抖和节流_第1张图片

节流:

直接比较当前时间currTime与上一个时间startTime,如果这个剩余时间大于延迟时间delay,表明立即执行函数;小于delay表明将要停止节流函数,立即清除定时器,立即执行函数。 

防抖和节流_第2张图片

你可能感兴趣的:(javascript,javascript)