防抖与节流

防抖与节流的本质其实是差不多的，都是为了减少调用频率，提高前端性能。

防抖是在一段时间内，只执行最后一次的操作。

节流是在执行事件时，每隔一段时间有规律进行运行。

防抖：一般用于input输入框查询事件，或者按钮点击事件较多

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<button id="btn">提交</button> <script>    let btn = document.getElementById('btn')    let timer = null    btn.addEventListener('click', function() {        if (timer) {            clearTimeout(timer)        }        timer = setTimeout(() => {             console.log(1)         }, 1000)    }) </script>

　节流：一般用于滚动事件较多

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<style>     body{         height: 2000px;     } </style> <script>     window.onscroll = fun(function() {         console.log('节流输出')     }, 2000)     let timer = null     function fun(fn, delay) {         let flg = true         return function() {             if (flg) {                 timer = setTimeout(() => {                     fn.call(this)                     flg = true                 }, 1000)             }             flg = false         }     } </script>