节流和防抖

节流：控制一段时间内触发的次数，减少一段时间的触发频率

使用场景： 1. scroll 事件，每隔一段时间计算位置信息 2. input 框实时搜索并发送请求，每隔一段时间发送一次请求

const throttle = (() => {
    // 设置上一次触发时间
    let last = 0;
    return (callback, time) => {
        // 获取当前时间戳
        let now = +new Date();
        // 当前时间减去上一次触发时间大于规定的延时时间，触发时间
        if (now - last > time) {
            callback();
            // 重置上一次执行时间
            last = now;
        }
    }
})();

防抖：借助setTimeout定时器，在一定的间隔时间内，将多次触发变为一次触发

使用场景： 1. 登录、发送短信等按钮避免用户点击太快，以致于发送多次请求，需要防抖 2. 调整浏览器窗口大小，resize 次数过于频繁，造成计算次数过多 3. 搜索框搜索输入，不需要每输入一个字就进行搜索，等待一段时间没有再次输入就返回结果

const debounce = (() => {
    // 设置一个空定时器
    let timer = null;
    return (callback, time) => {
        // 判断是否存在定时器，存在则清空定时器
        timer && clearTimeout(timer);
        timer = setTimeout(callback, time);
    }
})(); // 自调用，return

节流和防抖 ​

节流和防抖