日常的例子说明 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 ...
随机推荐
- Linux 系统的网络配置文件
系统的网络配置文件 方式一: 界面操作 setup -->界面配置网络,网关等 方式二: 修改配置文件 # 修改配置 vim /etc/sysconfig/network-scripts/ifc ...
- 51 nod 1682 中位数计数
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1682 1682 中位数计数 基准时间限制:1 秒 空间限制: ...
- 1812: [Ioi2005]riv
1812: [Ioi2005]riv Time Limit: 10 Sec Memory Limit: 64 MB Submit: 635 Solved: 388 [Submit][Status][D ...
- Python+django+uWSGI+Nginx
Python3.5+Django+uWSGI 安装Django pip3.5 install django 安装 uWSGI pip install uwsgi 新建 django_wsgi.py # ...
- nginx学习要点记录
IO多路复用: 1.轻量 2.cpu亲和性:把CPU核心和nginx工作进程绑定,把每个worker进程固定在一个CPU上执行,减少切换cpu的cache miss,获得更好的性能 3.IO多路复用e ...
- java 泛型数组列表
如下代码: package com.company; import java.lang.reflect.Array; import java.util.ArrayList; public class ...
- JS判断指定dom元素是否在屏幕内的方法实例
前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,或者图片的懒加载效果,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原 ...
- Java 遍历指定文件夹及子文件夹下的文件
Java 遍历指定文件夹及子文件夹下的文件 /** * 遍历指定文件夹及子文件夹下的文件 * * @author testcs_dn * @date 2014年12月12日下午2:33:49 * @p ...
- ThreadLocal理解
ThreadLocal 概述 ThreadLocal实例仅作为线程局部变量的==操作类==,以及==线程存储局部变量时的Key==.真正的线程局部变量是存储在各自线程的本地,通过Thread类中的Th ...
- Redis简介和常见的面试题
redis介绍及特点 Redis是由意大利人Salvatore Sanfilippo开发的一款内存内存高速缓存数据库. Reids全称为:Remote Dictionary Server(远程数据服务 ...