小菊花课堂之JS的防抖与节流

Yangder 发布于2019-08-02 12:10 / 1874人阅读

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。

前言

陆游有一首《冬夜读书示子聿》——“古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。”，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。

详解

在前端开发中，我们经常会碰到一些会持续触发的时间，比如输入框校验、resize、scroll、mousemove 等操作时，如果事件触发的频率无限制，会家中浏览器的负担，导致用户体验非常糟糕。
我们可以先看看持续触发过程中频繁执行函数是怎样的情况

在上面代码中，div 元素绑定了 mousemove 事件，当鼠标在 div（灰色）区域中移动的时候会持续地去触发该事件导致频繁执行函数。

再看一个例子




    
    没有防抖
    
    


    
        1.没有防抖的input：

在上面代码中，会监听键盘输入事件，只要按下键盘，就会触发这次模拟的ajax请求，不仅浪费了资源，而且在实际应用中，用户也是需要输入完整字符后，才请求。

防抖(debounce)

简单来说就是防止抖动，指触发事件在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
我们将上面的代码加入防抖优化一下：




    
    加入防抖
    
    


    
        2.加入防抖后的输入：

上面代码加入防抖后，当持续在输入框里输入时，并不会发送请求，只有当在指定时间间隔内没有再输入时，才会发送请求。如果先停止输入，但是在指定间隔内又输入，会重新触发计时。

节流(throttle)

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
我们同样在上面的需求上进行修改，加入节流函数。

//模拟ajax请求
function ajax(content) {
    console.log("ajax request " + content)
}

function throttle(fun, delay) {
    let last, deferTimer
    return function (args) {
        let that = this;
        let _args = arguments;

        let now = +new Date();
        if (last && now < last + delay) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                last = now;
                fun.apply(that, _args);
            }, delay)
        } else {
            last = now;
            fun.apply(that, _args);
        }
    }
}
let throttleAjax = throttle(ajax, 1000)
let inputThrottle = document.getElementById("throttle")
inputThrottle.addEventListener("keyup", function (e) {
    throttleAjax(e.target.value)
})

从上面代码可以看出，规定每一秒执行一次ajax请求，效果图也能比较清晰的反应出来。

小结区别

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

在其他同学的文章中看到这样的解释：
防抖 — 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

节流 — 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。

这大概可以较为清晰的讲出这两者的区别吧。

原理

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

文章来源
1.详谈js防抖和节流
2.轻松理解JS函数节流和函数防抖
3.函数防抖和节流

好啦，今天的小菊花课堂之JS的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。
see u ~ again

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53388.html

小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

leoperfect 2019-08-23 13:53 评论0 收藏0
你们都会的防抖与节流

摘要：关于防抖与节流的应用和解释自行查找资料。修改如果有定时器就清除如果时间满足就让他不满足总之除了第一次就只让其中一个执行一开始执行一次时间戳，最后停止在执行一次。这一篇文章我想写一下防抖与节流，因为我自己不是很理解而且说实话，以前知道，但是老忘，虽然概念还有一些简单的写法会，但还是缺乏练习和深刻的理解。 showImg(https://segmentfault.com/img/remo...

beanlam 2019-08-23 14:45 评论0 收藏0
前端笔记(二) 对象的深浅拷贝，函数的防抖与节流，函数柯里化，图片的预加载与懒加载

摘要：对象是无法通过这种方式深拷贝。这就是函数防抖和节流要做的事情。函数防抖当触发频率过高时函数基本停止执行而函数节流则是按照一定的频率执行事件。对象的深浅拷贝对象的深拷贝与浅拷贝的区别：浅拷贝：仅仅复制对象的引用, 而不是对象本身。深拷贝：把复制的对象所引用的全部对象都复制一遍浅拷贝的实现： var obj = { age : 18, person : { ...

dongxiawu 2019-08-26 11:43 评论0 收藏0
高级函数技巧-函数防抖与节流

摘要：封装方法也比较简单，书中对此问题也进行了处理使用定时器，让函数延迟秒后执行，在此秒内，然后函数再次被调用，则删除上次的定时器，取消上次调用的队列任务，重新设置定时器。在实际开发中，函数一定是最实用最频繁的一部分，无论是以函数为核心的函数式编程，还是更多人选择的面向对象式的编程，都会有函数的身影，所以对函数进行深入的研究是非常有必要的。函数节流比较直白的说，函数节流就是强制规定一...

whinc 2019-08-22 11:21 评论0 收藏0
函数防抖与函数节流

摘要：函数节流保证如果电梯第一个人进来后，秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行。前言有一些浏览器事件我们不希望它很频繁的触发，如调整窗口大小(onresize)、监听滚动条滚动(onscroll)，如果这些监听事件需要调用接口的话一秒内可能会调用上百次，这样坑定是有问题的。函数防抖（debounce）如果有人进电梯（触发事件），那电梯将在1...

novo 2019-08-26 12:02 评论0 收藏0