功能

函数防抖和函数节流：优化高频率执行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));
复制代码