前端开发之防抖和节流函数 - yuzhouxiaogegit/blog GitHub Wiki

前端开发之防抖和节流函数

【节流函数】一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。往往很多时候我们在提交表单时会出现多次提交的问题。这样会出现异常。

节流函数es5写法：

/*
    节流函数
    @param fn 要被节流的函数
    @param delay 设定的时间
*/
function throttle(fn, delay) {
    var startTime = 0;
    return function () {
        // 记录当前函数触发时间
        var endTime = Date.now();
        if (endTime - startTime > delay) {
            
            //注意this指向问题
            var that = this;
            var argu = arguments;

            fn.call(that,argu);
            // 同步时间
            startTime = endTime;
        }
    }
}
// 调用示例
throttle(function(){
        console.log(555555555)
},5000);

【防抖函数】：一个需要频繁触发的函数，在规定时间内，只能让最后一次生效，前面的不生效

防抖函数es5写法：

 /*
     防抖函数
     @param fn 要被防抖的函数
     @param delay 设定的时间
 */
         
 function debounce(fn, delay) {
     var timer = null;
     return function () {
         // 清理上一次延时器
         clearInterval(timer);
 
         //注意this指向问题
         var that = this;
         var argu = arguments;
 
         // 重新设置新的延时器
         timer = setTimeout(function () {
             fn.call(that,argu);
         }, delay)
     }
 }
 
 // 调用示例
 debounce(function(){
         console.log(555555555)
 },5000);