1. 概念区分

函数防抖:触发事件后,在n秒内函数只能执行一次,如果触发事件后在n秒内又触发了事件,则会重新计算函数延执行时间。

简单说:

频繁触发, 但只在特定的时间内才执行一次代码,如果特定时间内重新触发,break打断之后重新开始执行;

函数节流:在极少数情况下,函数的触发不是由用户直接出发的。在这些情况下,函数有可能被频繁的调用,造成大的性能问题

简单说:

频繁触发,只在特定的时间内执行一次,continue继续执行完;

2. 原理区分

看定义,你可能一会就忘记了,什么是函数防抖,什么是函数节流,最容易出错的就是函数防抖和函数节流还给混淆了。

今天看了,明天就把函数防抖和函数节流给搞反了。这是事实,不过我发现了小巧门,就跟初中、高中的数学公式一样。不用死记硬背,搞懂原理,顺着原理就推导出来,谁还记概念呢!

咋们举个网上绝无仅有的例子,唯我独创,哈哈,自恋了!


就拿咋用苍蝇拍打苍蝇一样,什么时候是函数防抖,什么时候是函数节流呢?


当你看电视的时候,两只苍蝇在电视机屏幕上来回的移动,实在是烦。于是你拿起了你手旁的苍蝇拍,准备把该死的苍蝇拍死在电视机上。

假设,拍打一次算一次特定的时间,拍打一次还打住了苍蝇算函数完成。

  1. 我们拍打一次算一次完整的执行动作;
  2. 假设苍蝇一直在不停的起飞,重新降落;我们的手还没打下去,苍蝇就重新换位置了,如此重复;怕打坏电视屏幕,我们的手一直处于拍打前的抖动状态,防止我们的手因为苍蝇的移动,不敢拍下去,而处于一种抽搐的状态。

函数防抖:就是等苍蝇落稳了,我们进行一次拍打动作,如果苍蝇飞走了,我们停在半空的手,没有拍打到电视上,重新处于拍打前的状态。(拍打一次算一次特定的时间,此时还没有拍下去)。

对应的解释:拍打一次算一次的特定的时间,如果苍蝇飞走了,此时苍蝇拍还没有拍下,我们重新拍打苍蝇,还没拍下,苍蝇又飞走了,如此周而复始,我们一直处于抖动状态,所以,我们拍打到苍蝇飞走,不能算一个特定的时间,待苍蝇落定之后,直到苍蝇落定,苍蝇拍拍下之后算一次特定时间,否则时间重新开始计算;

函数节流:就是等苍蝇落稳了,我们进行一次拍打动作,此时苍蝇飞走了,但是,你觉得拍打下去的时候,可能伤到它,该死的苍蝇就不会在电视上乱飞,干扰你看电视,所以你毅然决然的把拍打到了电视屏幕上(拍打一次算一次特定的时间,此时动作完成了)。

对应的解释:还是拍打一次算一次的特定时间,即使苍蝇飞走了,但是苍蝇拍拍打下之后,有可能伤及到苍蝇,或者苍蝇不再讨厌的在电视屏幕上乱飞,我们不像防抖那样,重新归为计算,我们要直接把苍蝇拍拍下,完成一次特定时间的拍打动作,这期间苍蝇有飞到别的地方,我们重新开始一次特定时间的拍打苍蝇动作。

3. 总结

我们只要记住,拍打一次苍蝇为一个特定的时间,函数防抖就是,苍蝇一直飞来飞去,我们一直没有完成一次特定时间,苍蝇飞走一次,我们重新拍打一次算特定时间的开始,直到拍打苍蝇结束为一次计算时间的周期,之前没有拍下的动作周期都结束重新开始;函数节流就是,不管苍蝇飞走了还是没有飞走,都要拍打一次,直到拍打苍蝇结束,算一次计算时间的周期;

英文单词记不记得住,哦,这个不在我的教学范围内。我也记不住!如果记不住,那就只记住一个,那记不住的及时另一个!这是最笨的方法。但是,挺有效的!

区分函数防抖&函数节流的更多相关文章

  1. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  2. vue函数防抖和节流

    Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 <template> <div> <input type='text' v ...

  3. JavaScript中函数防抖、节流

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  4. js函数防抖、节流实现

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

  5. 函数防抖 & 函数节流

    避免一个函数频繁执行 - 避免程序卡顿 js 是单线程的,setTimeout 这样的函数是异步的 异步的代码,交给对应的模块进行处理 模块在会将异步任务,在主线程执行完所有同步代码后,加入事件队列 ...

  6. js中的函数防抖与节流

    一.滚动条监听的例子 写一个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离,代码如下: function showTop () { var scrollTop = document.bod ...

  7. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  8. “浅入浅出”函数防抖(debounce)与节流(throttle)

    函数防抖与节流是日常开发中经常用到的技巧,也是前端面试中的常客,但是发现自己工作一年多了,要么直接复用已有的代码或工具,要么抄袭<JS高级程序设计>书中所述"函数节流" ...

  9. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

随机推荐

  1. vue后台管理系统遇到的注意事项以及总结

    地址栏加#号问题:Vue-router 中有hash模式和history模式,vue的路由默认是hash模式,一般开发的单页应用的URL都会带有#号的hash模式第一步在router/index.js ...

  2. Atcoder Beginner Contest 168 D - .. (Double Dots) (BFS)

    题意:有\(n\)个房间,在这些房间中两两连\(m\)次条边,问除了第一个房间,其他房间走到第一个房间的最短路径,输出这个房间所连的上一个房间,如果走不到,输出\(no\). 题解:刚开始我写了一个d ...

  3. Common Divisors CodeForces - 1203C

    题意: 给你n个数,让你找出来公因子有多少个.公因子:对于这n个数,都能被这个公因子整除 题解: 只需要找出来这n个数的最大公因子x,然后找出来有多少不同数能把x给整.(因为我们可以保证x可以把这n个 ...

  4. 大规模数据爬取 -- Python

    Python书写爬虫,目的是爬取所有的个人商家商品信息及详情,并进行数据归类分析 整个工作流程图: 第一步:采用自动化的方式从前台页面获取所有的频道 from bs4 import Beautiful ...

  5. Java对象延迟初始化的实现

    一.什么是延迟初始化? 在Java多线程程序中,有时候需要采用延迟初始化来降低初始化类和创建对象的开销. 延迟初始化实际上就是:当我们要进行一些高开销的对象初始化操作时,只有在使用这些对象时才进行初始 ...

  6. Windows下pip使用清华源

    一.下列内容更换成批处理,直接运行即可 @echo off md "C:\Users\Administrator\AppData\pip" echo [global] >C: ...

  7. codevs1068乌龟棋-四维DP,五维如何缩减一维

    我们从起点x开始暴力枚举所有决策 于是可以得到如下转移 void dfs(int x,int A,int B,int C,int D,int y) { if (x==n) {ans=max(ans,y ...

  8. switchable css dark theme in js & html custom element

    switchable css dark theme in js & html custom element dark theme / dark mode https://codepen.io/ ...

  9. bob and brad physical therapy knee exercise

    bob and brad physical therapy knee exercise 鲍勃和布拉德物理治疗膝关节运动 https://bobandbrad.com/ youtube https:// ...

  10. Google IO & 2019

    Google IO & 2019 Google IO Recap \ https://www.techradar.com/news/google-io-2019-keynote https:/ ...