1. 前言

函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，输入框持续输入，将输入内容远程校验、多次触发点击事件、onScroll等等。

2. 防抖

防抖函数如下：

// 防抖
function debounce(fun, delay) {
    let timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fun.call(this, arguments);
        }, delay);
    }
}

举例：

mouseover事件：

document.querySelector('.box').addEventListener('mousemove', () => {
    //mousemove此事件，只要在盒子范围内移动鼠标，那么都会触发该事件（很频繁）
    // 如果使用防抖是什么效果

    console.log('hello')
})

加了防抖函数呢？

document.querySelector('.box').addEventListener('mousemove', debounce(() => {
    console.log('hello')
}, 100));

3. 节流

节流函数：

function throttle(fun, delay) {
    let isRun = true;

    return function () {
        if (!isRun)
            return;
        isRun = false;//关键在这，如果持续触发该函数，那么此isRun一直为false，那么下面的定时器就不会执行
        setTimeout(() => {
            fun.apply(this, arguments);
            isRun = true;
        }, delay);
    };
}

应用举例：

假设监听了输入框的输入事件，并获取到值：

let input = document.getElementById('input')
input.addEventListener('input', () => {
    console.log(input.value);
})

当没有使用节流函数时：

会一直输入，这样如果要做输入提示（类似百度搜索那样，那不是每输入一个字符，都要请求后台一次？）

加了节流函数：

input.addEventListener('input', throttle(() => {
    console.log(input.value);
}, 500))

这里设置了500ms才执行一次，感觉效果就差不多了！