阅读 419

探究JS系列(二)节流与防抖

功能

函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover,input输入框的keypress等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。

代码

function $(selector) {
    return document.querySelector(selector);
}
function trigger(e) {
    console.log(e.target.value);
}
// 在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。
function debounce(func) {
    // 定时器
    let timer = null;
    let time = 200;
    return function(e) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.call(this, e);
        }, time);
    };
}
// 规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
function throttle(func) {
    // 记录当前时间
    let start = Date.now();
    let timer = null;
    let time = 200;
    return function(e) {
        let now = Date.now();
        clearTimeout(timer);
        if (now > start + time) {
            // 已过单位时间,重置开始时间
            func.call(this, e);
            start = now;
        } else {
            timer = setTimeout(() => {
                func.call(this, e);
            }, time);
        }
    };
}
$('#debounce').addEventListener('input', debounce(trigger));
$('#throttle').addEventListener('input', throttle(trigger));
复制代码