防抖和节流

窗口的resize、scroll、输入框内容校验等操作时，如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时，在这种情况下如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。

防抖

在事件被触发n秒之后执行，如果在此期间再次触发事件，则重新开始计时。

我们模拟输入表单数据，自动获取后台数据，联想搜索，反馈回前台。监听keyup事件，如果每次输入一个字符，就发送一次请求，那么将在极短的时间发送非常多次请求，后台服务器不堪重负！

// 监听input值 模糊搜索 防止一直搜索
<input id="phone" type="text"/>

// 需要触发的函数
function debounce(d){
    console.log("联想搜索phoneNumber：" + d)
}
let inp = document.querySelector("#phone");
// 输入触发的事件
function getPhone(fn,delay){
    let timer;
    // 使用闭包，保证每次使用的定时器是同一个
    return (d)=>{
        clearTimeout(timer);
        timer = setTimeout(()=>{
            fn(d);
            // 结束之后清除定时器
            clearTimeout(timer);
        },delay)
    }
}

let getPhoneDebounce = getPhone(debounce,1000);

inp.addEventListener('keyup',(e)=>{
    getPhoneDebounce(e.target.value);
})

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

/**
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

节流

如果持续触发一个事件，则在一定的时间内只执行一次事件。

我们模拟射击，首先第一次点击射击的时候，打出一发子弹，当以极短的时间再次点击射击的时候，由于需要‘冷却’——也就是节流，再次点击无效，当冷却时间过了之后，再次点击射击，则继续下一次射击
准备工具：一个射击的函数shot, 一个判断射击间隔是否结束的函数nextShot,一个触发射击的按钮，判断射击是否结束的定时器timer
基本思路：第一次点击按钮的时候，触发shot,当继续点击的时候，射击无效，只有过了定时器设置的时间才可以继续射击。

// 模拟射击
<button id="shot">射击</button>

function shot(){
    console.log('射击')
}
let btn = document.querySelector('#shot');
function nextShot(fn,delay){
    let timer;
    // 闭包原理同上
    return ()=>{
        // 定时器存在，无法射击
        if(timer){
            console.log('禁止射击');
        }else{  // 定时器不存在，射击，并设置定时器
            fn();
            timer = setTimeout(()=>{
                // 定时器结束，可以射击
                clearTimeout(timer);
                timer = null;
            },delay)
        }
    }
}
let start = nextShot(shot,20);
btn.addEventListener('click',()=>{
    start();
})

节流又分为时间戳版和定时器版。时间戳版是指，在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。

const throttle = (func, wait, ...args) => {
  let pre = 0;
  return function(){
    const context = this;
    let now = Date.now();
    if (now - pre >= wait){
       func.apply(context, args);
       pre = Date.now();
    }
  }
}

定时器版是指，在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。

const throttle = (func, wait, ...args) => {
  let timeout;
  return function(){
    const context = this;
    if(!timeout){
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context,args);
      },wait)
    }
  }
}

其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。两者结合版本如下：~~~~

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        var previous = 0;
    }else if(type===2){
        var timeout;
    }

    return function() {
        var context = this;
        var args = arguments;
        if(type===1){
            var now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(function() {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }

    }
}

参考文章来源：

• 《后台请求数量爆炸，没做好防抖与节流》
• 《防抖和节流原理分析》