日常的例子说明 throttle 和 debounce 的区别
不小心接触到 throttle 和 debounce,按捺不住猎奇的心理,找这两个函数的资料。
然而百度到的各种对他们的理解,我去啊。
艰难地搞明白他们是干嘛的之后,忍不住举个例子说说自己的理解,希望我的介绍能够简单到任何人(hr?)都能看懂。
首先,我们明确一下这两个函数的中文含义:
throttle: 频率控制
debounce: 空闲控制
栗子来了:
现在有一个输入框,用户正在输入一些文字,然后需要根据用户的输入向服务器发送请求。
假使用户正在疯狂码字中 :!@#¥%……&*()——+
throttle 策略下,每隔一定时间,我们就设为 500ms 吧,即:每 500ms ,都会向服务器发送一次请求。500ms 发一次,我们控制了函数调用的频率,这就是频率控制(throttle)。
debounce 策略下,用户疯狂码字的时候是不会发送 ajax 请求的,而一旦用户手累了,或者输入完成了,空闲了 500ms 没码字,此时我们的 ajax 请求才会发送了出去。事件一直在进行,直到空闲了 500ms 才触发我们的函数,这就是空闲控制(debounce)。
日常的例子说明 throttle 和 debounce 的区别的更多相关文章
- 【 js 性能优化】throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北
网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- javascript中的throttle和debounce
throttle 我们这里说的throttle就是函数节流的意思.再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制.主要应用的场景比如: 1.鼠标移动,mousemove 事件2.DOM ...
- 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别
问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...
- throttle和debounce
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
- lodash throttle和debounce
https://lodash.com/docs#debounce throttle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器 throttle:将一个函数的调用频率限制在一 ...
- throttle和debounce简单实现
function debounce(delay,fn){ var timer; return function(){ var ctx = this,args = arguments; clearTim ...
随机推荐
- UIImageView的animationImages动画
UIImageView的animationImages动画 UIImageView的animationImages,只有在做非常规动画的时候才有优势,比方说下图中左侧动画.如果用来做下图中的右侧动画, ...
- Loadrunner11代理录制&各个常见功能介绍
1.代理录制: Lr代理工具:C:\Program Files (x86)\HP\LoadRunner\bin\wplus_init_wsock.exe 1) 设置代理 配置代理信息: 2)设置浏览器 ...
- Redis学习---基础学习[all]
什么是NoSQL型数据库 NoSQL数据库---NoSQL数据库的分类 Redis学习---NoSQL和SQL的区别及使用场景 Redis学习---负载均衡的原理.分类.实现架构,以及使用场景 什么是 ...
- [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...
- UVa 1363 - Joseph's Problem(数论)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 1934. [SHOI2007]善意的投票【最小割】
Description 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可 ...
- Linux - Confluence搭建
0. 摘要 Confluence自身携带内置数据库,对于生产环境建议搭建外置数据库,Confluence通过相应驱动连接上.并操作数据库.Confluence支持多种数据库,本文采用MySQL. 1. ...
- J - Relief grain HDU - 5029
Relief grain Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 100000/100000 K (Java/Others)T ...
- docker常用命令(二)
把镜像保存到本为一个文件 docker save -o filename.tar imagename:tag 载入保存在本地的镜像 docker load < filename.tar 或者 d ...
- c++——this指针
实验1:若类成员函数的形参 和 类的属性,名字相同,通过this指针来解决. 实验2:类的成员函数可通过const修饰,请问const修饰的是谁 #include <iostream> u ...