不小心接触到 throttle 和 debounce,按捺不住猎奇的心理,找这两个函数的资料。

然而百度到的各种对他们的理解,我去啊。

艰难地搞明白他们是干嘛的之后,忍不住举个例子说说自己的理解,希望我的介绍能够简单到任何人(hr?)都能看懂。

首先,我们明确一下这两个函数的中文含义:

throttle: 频率控制

debounce: 空闲控制

栗子来了:

现在有一个输入框,用户正在输入一些文字,然后需要根据用户的输入向服务器发送请求。

假使用户正在疯狂码字中 :!@#¥%……&*()——+

throttle 策略下,每隔一定时间,我们就设为 500ms 吧,即:每 500ms ,都会向服务器发送一次请求。500ms 发一次,我们控制了函数调用的频率,这就是频率控制(throttle)。

debounce 策略下,用户疯狂码字的时候是不会发送 ajax 请求的,而一旦用户手累了,或者输入完成了,空闲了 500ms 没码字,此时我们的 ajax 请求才会发送了出去。事件一直在进行,直到空闲了 500ms 才触发我们的函数,这就是空闲控制(debounce)。

日常的例子说明 throttle 和 debounce 的区别的更多相关文章

  1. 【 js 性能优化】throttle 与 debounce 节流

    在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...

  2. 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流

    在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...

  3. [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北

    网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...

  4. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  5. javascript中的throttle和debounce

    throttle 我们这里说的throttle就是函数节流的意思.再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制.主要应用的场景比如: 1.鼠标移动,mousemove 事件2.DOM ...

  6. 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别

    问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...

  7. throttle和debounce

    遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...

  8. lodash throttle和debounce

    https://lodash.com/docs#debounce throttle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器 throttle:将一个函数的调用频率限制在一 ...

  9. throttle和debounce简单实现

    function debounce(delay,fn){ var timer; return function(){ var ctx = this,args = arguments; clearTim ...

随机推荐

  1. springmvc处理日期格式

    解决http400错误 通常有两个来源: 1 页面的下拉列表中传入了字符串,而服务器需要的是Integer类型的,所以服务器拒绝. 2, 浏览器传给服务器端的日期格式字符串,服务器端理解不了,所以需要 ...

  2. win中使用cmd杀端口

    最近在win开发时,总是遇到端口占用的情况...可能是跑的程序太多了吧 当你测试一个demo时遇到这个就很恶心.. 记一下 netstat -ano | findstr 80 //列出进程极其占用的端 ...

  3. php算法基础----时间复杂度和空间复杂度

    算法复杂度分为时间复杂度和空间复杂度. 其作用: 时间复杂度是指执行算法所需要的计算工作量: 而空间复杂度是指执行这个算法所需要的内存空间. (算法的复杂性体现在运行该算法时的计算机所需资源的多少上, ...

  4. Gitflow 工作流简介

    Gitflow工作流简介 Gitflow工作流通过为功能开发.发布准备和项目维护分配独立的分支,让发布迭代过程更流畅. Gitflow工作流定义了一个围绕项目发布的严格分支模型,它会相对复杂一点,但提 ...

  5. HBase的常用Java API

    1. 创建HBase表的对象 HBase表的对项名字叫HTable,创建它的方法有很多,常见的有如下: org.apache.hadoop.hbase.client.HTable hTable = n ...

  6. ubuntu 12.04 eclipse增加桌面快捷方式

    1.创建桌面启动器(编辑/usr/share/applications/eclipse.desktop) [Desktop Entry] Encoding=UTF-8 Name=eclipse Com ...

  7. Java8新特性 -- 四大内置的核心函数式接口

    可以把这些函数式接口作为方法的参数. 1.0 核心内置函数式接口一: 消费型接口@FunctionalInterfacepublic interface Consumer<T> { voi ...

  8. CPU中MMU的作用

    http://blog.csdn.net/jjw97_5/article/details/39340261 MMU是个硬件,每当cpu访问一个地址的时候,MMU从内存里面查table,把cpu想访问的 ...

  9. Oracle从一个用户导出数据到另一个用户

    如果想导入的用户已经存在: 1. 导出用户 expdp user1/pass1 directory=dumpdir dumpfile=user1.dmp 2. 导入用户 impdp user2/pas ...

  10. 3994: [SDOI2015]约数个数和

    Description 设d(x)为x的约数个数,给定1<=T<=50000 组1<=N, M<=50000 ,求 有一个公式\[d(ij)=\sum_{x|i}\sum_{y ...