函数节流与防抖

目录

• 目的
• 节流
  • 定义
• 防抖
  • 定义

目的

事件处理函数A， 节流/防抖函数B
目的是：

• 优化用户体验（适时反馈，避免UI渲染阻塞，浏览器卡顿）
• 提升页面性能（避免页面渲染卡顿，减少服务器压力，防范恶意触发）

用在页面中连续触发的事件处理上：如scroll, resize窗口大小改变, input表单验证，click点击，mouseover鼠标滑动等等。

节流函数和防抖函数都是执行B（A）返回的内部函数（闭包）

节流

定义

对于持续的事件触发，每达到固定时间间隔，执行一次事件处理函数A
比如连续1s点击很多次按键时，固定每0.5s触发一次处理函数，就只会触发2次。
节流函数举例：

function throttle(fn, delay){
    var last=0;
    return function(){
        var now=Date.now();
        if (now - last >= delay) { 
            fn.apply(this, arguments); 
            last = now; 
        }
    };
}

节流可以提高性能，提高安全性。

防抖

定义

事件触发停止后开始计时，在固定时间内不再有事件触发，执行事件处理函数A。
事件连续触发时不执行函数，触发停止后，某个时间段以后再执行。
例如表单输入事件，等待表单输入结束再执行函数

function debounce(fn, delay) {
    var timer; 
    return function() { 
        console.log('事件触发'); 
        var self = this, 
            argumentsBySelf = arguments; 
        clearTimeout(timer); //清除上次的定时器，fn 就没有被调用。
        timer = setTimeout(function() {     //设定新的定时器
            fn.apply(self, argumentsBySelf); 
        }, delay); 
    } 
}