防抖和节流

理论知识：

防抖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属性来获取参数，该属性是一个由函数参数组成的类数组。

 

节流：

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