不小心接触到 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. 阿里云堡垒机密钥连接ECS服务器

    文:铁乐与猫 2017-6月中旬 堡垒机远程桌面windows系统就不用细说了 堡垒机远程ssh连接linux系统倒要说一下,毕竟是为安全一般只用通过密钥连接,而不使用密码的方式连接. 首先我们得在需 ...

  2. MySql报2006error错误的解决方法(数据过大)

    最近迁移项目中发现,转移数据库出现的几个问题,其中之一就是 2006 error,解决过程如下: 首先贴出报错结果 [Msg] Finished - Unsuccessfully 出现这个结果,首先检 ...

  3. mysql 批量插入500W 测试

    set_time_limit(800);$dsn = 'mysql:host=localhost;dbname=test';$db = new PDO($dsn,'root','',array(PDO ...

  4. 设计模式之——单例模式(Singleton)的常见应用场景(转):

    单例模式(Singleton)也叫单态模式,是设计模式中最为简单的一种模式,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象,也因此 ...

  5. 关于移动端APP开发-字体样式变大问题

    前两天在写App项目的时候发现一个问题,就是明明css写的样式是14px,刚开始在页面显示时并未出现问题,可是内容一多,字体突然变大了. what?,不明所以,在各大网站上找了好久才知道是浏览器的字体 ...

  6. 第三周:Excel分析

    Excel常用于敏捷,快速,需要短时间相应的场景下是非常便捷的数据处理工具. 相对于语言类例如python和R等则用于常规的,规律的场景中应用,便于形成日常规则统计分析. 对于学习的路径:Excel函 ...

  7. linux批量远程多服务器FTP并下载文件的脚本

    #!/bin/bashtime=`date +%Y%m`day=`date -d '-1 days' +%Y%m%d`localDir="/DBBackup/GameDB"cd $ ...

  8. Kafka设计解析(十五)Kafka controller重设计

    转载自 huxihx,原文链接 Kafka controller重设计 目录 一.Controller是做什么的 二.Controller当前设计 三.Controller组成 四.Controlle ...

  9. PAT乙级1007

    1007 素数对猜想 (20 分) 让我们定义d​n​​为:d​n​​=p​n+1​​−p​n​​,其中p​i​​是第i个素数.显然有d​1​​=1,且对于n>1有d​n​​是偶数.“素数对猜想 ...

  10. 【游记】NOIP2018 退役滚粗记

    day0 早上6点半到机房 又复习了一下还没看的板子 刷了2道水题练手感 结果还是肛起了fgo 早上单抽出梅林 美滋滋 感觉把两天的RP都用光了 早上坐上了去福州的动车 一路上说说笑笑 自信满满 下午 ...