Underscore.js 中 _.throttle 和 _.debounce 的差异

Underscore.js是一个很精干的库,压缩后只有5.2KB。它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程。

通常的函数(或方法)调用过程分为三个部分:请求、执行和响应。(文中“请求”与“调用”同义,“响应”与“返回”同义,为了更好的表述,刻意采用请求和响应的说法。)

某些场景下,比如响应鼠标移动或者窗口大小调整的事件,触发频率比较高。若稍处理函数微复杂,需要较多的运算执行时间,响应速度跟不上触发频率,往往会出现延迟,导致假死或者卡顿感。

在运算资源不够的时候,最直观的解决办法就是升级硬件,诚然通过购买更好的硬件可以解决部分问题,但是也需要为此付出高额的成本。特别是客户端和服务器模式,要求客户端统一升级硬件基本不可能。

在资源有限的前提下,处理函数无法即时响应高频调用。退而求其次,只响应部分请求是否可行呢?某些场景下的密集性请求,具备很强的同质和连续性。比如说,鼠标移动的轨迹参数。响应越及时效果越平滑,但是如果响应速度跟不上时,反而会出现卡顿感,如果适当的丢弃一些请求效果更流畅。

throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。

电梯超时

想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应。假设电梯有两种运行策略throttle 和 debounce ,超时设定为15秒,不考虑容量限制。

  • throttle 策略的电梯。保证如果电梯第一个人进来后,15秒后准时运送一次,不等待。如果没有人,则待机。
  • debounce 策略的电梯。如果电梯里有人进来,等待15秒。如果又人进来,15秒等待重新计时,直到15秒超时,开始运送。
时间: 2024-11-05 12:29:49

Underscore.js 中 _.throttle 和 _.debounce 的差异的相关文章

浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异

Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个函数方法 _.throttle 和 _.debounce 的原理.效果和用途. 通常的函数(或方法)调用过程分为三个部分:请求.执行和响应.(文中“请求”与“调用”同义,“响应”与“返回”同义,为了更好的表述,刻意采用请求和响应的说法.) 某些场景下,比如响应鼠标移动或者窗口大小调整的事件,触发频率

underscore.js中的节流函数debounce及trottle

函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数 clearTimeout(cancelTimer); cancelTimer =setTimeout(function(){ switchControl.switchAciontFactory(view, conf); },300) 代码的意思就不做多说了,实际上我无意间实现了一个debou

浅谈 Underscorejs中 _.throttle 和 _.debounce 的差异和使用场景

通常的函数(或方法)调用过程分为三个部分:请求.执行和响应.(文中"请求"与"调用"同义,"响应"与"返回"同义,为了更好的表述,刻意采用请求和响应的说法.) 某些场景下,比如响应鼠标移动或者窗口大小调整的事件,触发频率比较高.若稍处理函数微复杂,需要较多的运算执行时间,响应速度跟不上触发频率,往往会出现延迟,导致假死或者卡顿感. 在运算资源不够的时候,最直观的解决办法就是升级硬件,诚然通过购买更好的硬件可以解决部分问题,但是

underscore.js中模板函数应用

一.使用技术要点 (1)使用zepto.js的ajax请求; (2)使用underscore.js的_.template设定模板,模板一般以<script type="text/template"></script>,不是<template></template> (3)参数是以{data:listObj},而不是listObj (4)注意each里面data与item的对映 <!DOCTYPE html> <html&

浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异[转]

看的文章来自: https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs 使用场景 只要牵涉到连续事件或频率控制相关的应用都可以考虑到这两个函数,比如: 游戏射击,keydown 事件 文本输入.自动完成,keyup 事件 鼠标移动,mousemove 事件 DOM 元素动态定位,window 对象的 resize 和 scroll 事件 文章里有个比喻很形象 throttl

javascript中的throttle和debounce

throttle 我们这里说的throttle就是函数节流的意思.再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制.主要应用的场景比如: 1.鼠标移动,mousemove 事件2.DOM 元素动态定位,window对象的resize和scroll 事件 有人形象的把上面说的事件形象的比喻成机关枪的扫射,throttle就是机关枪的扳机,你不放扳机,它就一直扫射.我们开发时用的上面这些事件也是一样,你不松开鼠标,它的事件就一直触发.例如: 复制代码 代码如下: var resizeT

Underscore.js 函数节流简单测试

函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js  本省就包含了函数节流的处理函数 _.throttle 和 _.debounce 简单的测试使用如下: 需要使用的类库为jquery  .Underscore 测试的方法为:mousemove 事件 测试页面代码如下: <!DOCTYPE html > <html> <head> <script src="jquery-1.11

underscore.js源码解析(二)

前几天我对underscore.js的整体结构做了分析,今天我将针对underscore封装的方法进行具体的分析,代码的一些解释都写在了注释里,那么废话不多说进入今天的正文. 没看过上一篇的可以猛戳这里:underscore.js源码解析(一) underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js 本文解析的underscore.js版本是1.8.3 _.each 1

(二)underscore.js框架Utility类API学习以及模型template的详细介绍

本文介绍的是underscore.js提供的Utility Functions. noConflict_.noConflict() Give control of the "_" variable back to its previous owner. Returns a reference to theUnderscore object. 这个函数主要是为了解决underscore.js与其他框架或js名字冲突的问题.我们知道:underscore.js使用全局对象_,如果在unde