zoukankan      html  css  js  c++  java
  • js中的函数防抖与节流

    一、滚动条监听的例子

      写一个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离,代码如下:

    function showTop  () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置:' + scrollTop);
    }
    window.onscroll  = showTop

      但是在运行的时候会发现存在一个问题:这个函数的默认执行频率,太!高!了!。 

      以chrome为例,我们可以点击选中一个页面的滚动条,然后点击一次键盘的向下方向键,会发现函数执行了8-9次

      浏览器的性能是有限的,不应该浪费在这里,所以接着讨论如何优化这种场景。

    二、防抖(debounce) 

      定义在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时

           实现:实现的关键就在于setTimeOut这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现。

    /*
    * fn [function] 需要防抖的函数
    * delay [number] 毫秒,防抖期限值
    */
    function debounce(fn,delay){
        let timer = null //借助闭包
        return function() {
            if(timer){
                clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
                timer = setTimeOut(fn,delay) 
            }else{
                timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
            }
        }
    }

          场景

    • 鼠标/触摸屏的mouseover/touchmove事件
    • 页面窗口的resize事件
    • 滚动条的scroll事件

    三、节流(throttle)

         定义规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效

       实现:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效

       借助setTimeout来做一个简单的实现,加上一个状态位valid来表示当前函数是否处于工作状态:

    function throttle(fn,delay){
        let valid = true
        return function() {
           if(!valid){
               //休息时间 暂不接客
               return false 
           }
           // 工作时间,执行函数并且在间隔期内把状态位设为无效
            valid = false
            setTimeout(() => {
                fn()
                valid = true;
            }, delay)
        }
    }

      场景:

    • 按钮点击事件,防止用户多次重复提交
    • API的调用
  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number (考虑负数的情况)
    8. String to Integer (整数的溢出)
    7. Reverse Integer (整数的溢出)
    LeetCode Minimum Size Subarray Sum
    LeetCode Course Schedule II
    Linux 文件缓存 (一)
    LeetCode Tries Prefix Tree
    Linux : lsof 命令
    LeetCode Binary Tree Right Side View
  • 原文地址:https://www.cnblogs.com/gg-qq/p/11249200.html
Copyright © 2011-2022 走看看