手写函数防抖节流

系统管理员 2022-03-27 06:52 251阅读 0赞

**DOM 0级事件**

<style>
        .demo{width:200px;height:200px;border:1px solid red;overflow-y:scroll;margin-top:50px;}
        .scroll{height:5000px;}
    </style>
    </head>
    <body>
        <div class="wrap">
            <div id="nothing" class="demo">
                普通滚动
                <div class="scroll"></div>
            </div>
            <div id="throttle" class="demo">
                函数节流
                <div class="scroll"></div>
            </div>
            <div id="debounce" class="demo">
                函数防抖
                <div class="scroll"></div>
            </div>
        </div>
        <script type="text/javascript">
            // 普通滚动
            document.getElementById("nothing").onscroll = function(){
                console.log("普通滚动");
            };
    
            // 函数节流
            var canRun = true;
            document.getElementById("throttle").onscroll = function(){
                if(!canRun){
                    // 判断是否已空闲，如果在执行中，则直接return
                    return;
                }
    
                canRun = false;
                setTimeout(function(){
                    console.log("函数节流");
                    canRun = true;
                }, 300);
            };
    
            // 函数防抖
            var timer = false;
            document.getElementById("debounce").onscroll = function(){
                clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    
                timer = setTimeout(function(){
                    console.log("函数防抖");
                }, 300);
            };            
        </script>
    </body>
    </html>

**DOM 2级事件 事件监听**

document.addEventListener('scroll', debounce(test, 300))
    
    function test() {
        console.log('函数...')
    }

函数防抖（debounce）

function debounce(fn, delay) {
        let timer;
        return function() {
            let context = this;
            let args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay);
        };
    }

函数节流（throttle）

// 方法一：定时器实现
    const throttle = function(fn,delay) {
      let timer = null
      return function() {
        const context = this
        let args = arguments
        if(!timer) {
          timer = setTimeout(() => {
            fn.apply(context,args) 
            clearTimeout(timer) 
            timer = null;
          },delay)
        }
      }
    }
    
    // 方法二：时间戳
    const throttle2 = function(fn, delay) {
      let preTime = Date.now()
    
      return function() {
          const context = this
          let args = arguments
          let doTime = Date.now()
          if (doTime - preTime >= delay) {
              fn.apply(context, args)
              preTime = Date.now()
          }
      }
    }

[javascript函数防抖Debounce][javascript_Debounce]

来源：[https://segmentfault.com/a/1190000017860819][https_segmentfault.com_a_1190000017860819]

[javascript_Debounce]: http://www.jqhtml.com/23816.html
[https_segmentfault.com_a_1190000017860819]: https://segmentfault.com/a/1190000017860819

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关函数防抖和函数节流

数抖动就是在一段时间内频繁的访问一个函数，大量的操作了dom。就可能导致一些性能问题。浏览器会出现卡顿的现象。比如你在执行拖拽滚动条。鼠标移动时获取鼠标的坐标。或者是搜索...

淩亂°似流年/ 2024年04月17日 14:40/ 0 赞/ 88 阅读

相关函数防抖节流

采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在

ゝ一世哀愁。/ 2023年10月12日 08:09/ 0 赞/ 21 阅读

相关手写防抖节流

文章目录手写前端常用技巧-防抖节流防抖节流 1. 首节流 2. 尾节流 3. 首尾节流总结 --

拼搏现实的明天。/ 2023年10月02日 11:06/ 0 赞/ 16 阅读

相关函数防抖和函数节流

概念　函数防抖（debounce） > 函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。　　简

分手后的思念是犯贱/ 2023年08月17日 16:03/ 0 赞/ 122 阅读

相关函数防抖和节流

函数防抖和节流是用来干什么的？是优化高频率执行js代码一种手段。在js中有一些事件在触发时会不断调用绑定在事件上的回掉函数，极大地浪费资源，降低性能。

左手的ㄟ右手/ 2023年06月10日 14:28/ 0 赞/ 31 阅读

相关函数防抖和函数节流

使用节流防抖函数(性能优化) 那么在 vue 中怎么使用呢：在公共方法中（如 untils.js 中），加入函数防抖和节流方法 // 防抖 ex

「爱情、让人受尽委屈。」/ 2023年03月01日 11:46/ 0 赞/ 61 阅读

相关手写防抖与节流

概念介绍防抖：高频输入时，定时器时间间隔内将只执行一次函数，如果后续再次输入触发函数，将会重置这个定时间隔时间，并且延后触发例如：间隔为500ms，在第350ms

红太狼/ 2022年10月12日 12:59/ 0 赞/ 177 阅读

相关手写函数防抖节流

DOM 0级事件 <style> .demo{width:200px;height:200px;border:1px solid red;overfl

系统管理员/ 2022年03月27日 06:52/ 0 赞/ 252 阅读

相关节流、防抖

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t

向右看齐/ 2022年01月30日 00:39/ 0 赞/ 351 阅读

相关函数防抖和函数节流

函数节流 > 高频触发事件，在 n 秒内只会执行一次，所以节流会稀释函数执行的频率。举个例子，古时候人们治水，一般都是直接用堵起来的水坝，把水堵住。但是后来发现，堵不如疏

﹏ヽ暗。殇╰゛Y/ 2021年08月26日 13:39/ 0 赞/ 461 阅读