介绍防抖节流原理、区别以及应用，并用javascript进行实现

最新推荐文章于 2025-02-10 23:55:20 发布

原创最新推荐文章于 2025-02-10 23:55:20 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #web

javascript 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了防抖和节流的原理、区别及应用，并给出JavaScript实现。防抖是事件触发后等待n秒执行回调，期间再触发则重新计时，适用于搜索框联想、按钮提交等场景；节流规定一定时间内函数只能触发一次，用于拖拽、缩放等场景。

介绍防抖节流原理、区别以及应用，并用javascript进行实现

防抖：当一个事件触发时候，需要等待n秒以后执行回调，如果在等待的n秒内该事件又被触发了，那么需要重新计时等待n秒。

使用场景:

搜索框联想：防止联想发送请求，只发送最后一次
按钮提交的场景，防止多次提交按钮，只执行最后一次提交

简单版本

<button class="debounce-btn">简单版防抖</button>
<script>
        // 防抖：在事件被触发n秒后再次执行回调，如果在这n秒内又被触发了，那么需要重新计时。
        // 适用的场景： 按钮提交的场景，防止多次提交按钮，只执行最后一次提交。
        //             搜索框联想场景，防止联想发送请求，只发送最后一次
        function debounce(fun, await) {
            let timeout = null;
            return function () {
                let context = this;
                let args = arguments;
                if (timeout) {
                    clearTimeout(timeout)
                }
                timeout = setTimeout(function () {
                    fun.apply(context, args)
                }, await)
            }
        }
        function add() {
            console.log('简单版防抖')
        }
        document.querySelector('.debounce-btn').onclick = debounce(add, 2000)
    </script>

立即执行版本

<button class="immediate-btn">立刻执行版防抖</button>
<script>
     // 立即执行版本
     function immediateDebounce(fun, await, immediate) {
         let timeout = null;
         return function () {
             let context = this;
             let args = arguments;
             if (timeout) {
                 clearTimeout(timeout) 
             }
             if (immediate) {
                 let callNow = !timeout;
                 timeout = setTimeout(function(){
                     timeout = null
                 },await)
                 console.log(timeout)
                 
                 if(callNow){
                     fun.apply(context,args);
                 }
             } else {
                 timeout = setTimeout(function () {
                     fun.apply(context, args)
                 }, await)
             }
         }
     }
     function immediateAdd() {
         console.log('立刻执行版防抖')
     }
     document.querySelector('.immediate-btn').onclick = immediateDebounce(immediateAdd, 2000, true)
    </script>

节流：规定一定时间内只能触发一次函数，即使当前被触发了多少发送事件，但是也只生效一次
使用场景：

拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize

使用定时器实现

 <button class="throttle-setTimeout">节流定时器实现</button>
  <script>
         function throttle(fn,await){
            let canSend=true;
            return function(){
                let context = this;
                let args = arguments;
                if(!canSend) return false;
                canSend = false;
                setTimeout(function(){
                    canSend = true;
                    fn.apply(context,args)
                },await)
            }
        }
        function fun(){
            console.log('定时器节流')
        }
        document.querySelector('.throttle-setTimeout').onclick=throttle(fun,2000);
    </script>

使用时间戳实现：
使用时间戳，当触发事件的时候，我们去除当前的时间戳，然后减去指点的时间戳（最一开始值设置为0），如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

<button class="throttle-setTimeout">节流时间戳实现</button>
  <script>
        function throttle(func, await) {
            let previous = 0;
            return function () {
                let now = + new Date();
                let context = this;
                args = arguments;
                if (now - previous > await) {
                    func.apply(context, args)
                    previous = now
                }
            }
        }
        function fun(){
            console.log('时间戳节流')
        }
        document.querySelector('.throttle-setTimeout').onclick=throttle(fun,2000);
    </script>