防抖和节流

防抖和节流是用来对性能进行优化，减少网络请求次数，大大的增加了运行效率

防抖

防抖是将多个执行变成最后一次执行，相当于是点击了10次，捕获最后一次点击事件，一秒之后打印

<button>防抖</button>
<script>
    // 防抖
    const btn = document.querySelector('button');
    let timer;
    let num = 0;
    btn.onclick = () => {
        clearTimeout(timer)
        timer = setTimeout(() => {
             num++
             console.log(num);
         }, 1000);
     }
 </script>

节流

节流是将多个执行变成每隔一段时间执行一次，相当于是input输入10个字符停止之后，一秒之后打印

    <input type="text" placeholder="节流">
    <script>
        // 节流
        const inp = document.querySelector('input')
        let timer;
        inp.oninput = () => {
            clearTimeout(timer)
            timer = setTimeout(() => {
                console.log(inp.value);
            }, 1000);
        }

    </script>

区别

防抖是针对于点击事件，捕获最后一次之后，一秒后执行。而节流则针对于input输入，停止输入之后，一秒后执行。两者都是对性能进行优化。