underscore里面会有两个防止多次【本文受版权保护】本文版权归作者所有，未经授权不得转载。重复操作的方法，_.throttle和_本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】.debounce，它很像setTimo【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ut的升级版，但是它们到底有什么区别呢？

【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netngnet】【版权所有】唐霜 www.tangshu【本文受版权保护】【本文首发于唐霜的博客】ang.net【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

我们来看下用setTimout实现的一段转载请注明出处：www.tangshuang.net原创内容，盗版必究。代码：

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【本文首发于唐霜的博客】【访问 www.tangshuang.n原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】

var timer$(window).on("click", () => {
  if(timer) {
    clearTimeout(timer)
  }
  
  timer = setTimeout(() => {
    // ...
  }, 500)
})

通过上面这段代码，可以防止反复点击窗口反【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net复执行同一个函数。这个方法被称为“防抖”【转载请注明来源】原创内容，盗版必究。。使用_.debounce可以更优雅的实未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。现：

【版权所有，侵权必究】【版权所有】唐霜 www.tangshu【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netang.net

$(window).on("click", _.debounce(() => {
  // ...
}, 500))

明显减少了非常多的代码。但是上面的这种方本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。法会有一个问题，如果在500毫秒内一直点【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】击，那么函数永远只会执行一次，点击不停止【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】，函数就不会再执行。一般来说不会有这种情【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。况出现，但是有的时候确实需要有这种机制：本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】在不断点击的时候，如果距离上次执行函数超转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。过了500毫秒，那么就可以再执行函数一次本文版权归作者所有，未经授权不得转载。【作者：唐霜】。

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ngnet】未经授权，禁止复制转载。

我们再来看_.throttle又是什么情【转载请注明来源】【版权所有】唐霜 www.tangshuang.net况：

转载请注明出处：www.tangshua【本文首发于唐霜的博客】原创内容，盗版必究。ng.net【原创不易，请尊重版权】

var flag = false$(window).on("click", () => {
  if(flag) return
  flag = true
  // ...
  setTimeout(() => flag = false, 500)
})

上面这段代码通过一个flag变量来记录当本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。前的点击状态，第一次点击之后会执行动作，【未经授权禁止转载】【原创内容，转载请注明出处】但是500毫秒内再点击不会执行，直到过了本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】500毫秒，再点击就有效，如此循环下去。

【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。

简便的写法是：

原创内容，盗版必究。原创内容，盗版必究。【原创不易，请尊重版权】

$(window).on("click", _.throttle(() => {
  // ...
}, 500))

这种方法会让第一次点击之后500ms之后【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。的点击再生效。这种方法被称为“节流”。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

从上面可以看出来，_.throttle和【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】_.debounce的区别：

【原创内容，转载请注明出处】【访问 www.tangshuang.n【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【原创不易，请尊重版权】

虽然在等待时间内函数都不会再执行，但_.【本文首发于唐霜的博客】【原创不易，请尊重版权】throttle在第一次触发后开始计算等待时间，_.deboun【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ce在最后一次触发之后才计算等待时间（最后一次在等待时【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。间范围内）。

【转载请注明来源】转载请注明出处：www.tangshua【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ng.net原创内容，盗版必究。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ng.net

【转载请注明来源】【访问 www.tangshuang.n未经授权，禁止复制转载。【本文首发于唐霜的博客】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。

有一个点需要特别注意，_.throttl著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】e和_.debounce的返回值是一个函本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】数，运行这个函数才相当于运行包装了set未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netTimeout的函数体，它的大致结构如下未经授权，禁止复制转载。【本文受版权保护】：

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

_.debounce = function(factory, time) {
  var timer
  return function() {
    if(timer) clearTimeout(timer)
    timer = setTimeout(factory, time)
  }
}
// for example:
function someClass() {}
someClass.prototype.action = _.debounce(function() { // action将会是一个函数
  this.anotherAction() // 注意这里直接使用this，this指向someClass的实例化对象
}, 500);

debounce使用中应该要注意哪些问题著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】？

【作者：唐霜】【本文首发于唐霜的博客】

var fun = _.debounce(factory, wait, immediate)

如果immediate设置为true，表本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】示当执行fun()时，factory马上本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。执行，并且在wait这个时间段内即使再执【本文首发于唐霜的博客】【本文首发于唐霜的博客】行fun()，将不再执行factory函本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】数，而且计时器还会被重置为0，重新计时，【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】而如果计时器过了wait设定的时间，在执本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】行fun()时，就会再触发factory转载请注明出处：www.tangshuang.net【版权所有，侵权必究】。

【本文受版权保护】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ngnet】

var action = function() {
    alert("ok")
}
var deb = _.debounce(action, 2000, true)
deb() // 立即执行了action()
deb() // 啥也不做，计时器被重置为0，重新开始
setTimeout(deb, 1000) // 啥也不做，计时器被重置为0，重新开始
setTimeout(deb, 3001) // 从上一次执行deb之后过了2001毫秒，所以action()再次被执行

而如果将immediate设置为fals著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。e，表示当执行fun()时，开始等待，过【本文受版权保护】【本文首发于唐霜的博客】了wait时间段之后立即执行factor【未经授权禁止转载】本文作者：唐霜，转载请注明出处。y这个函数，但是如果中途再次执行fun(本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。)的话，计时器将被重置为0，并继续计时到本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】wait之后才执行factory。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【转载请注明来源】本文版权归作者所有，未经授权不得转载。

var action = function() {
    alert("ok")
}
var deb = _.debounce(action, 2000)
deb() // 啥都不做
deb() // 啥也不做，计时器被重置为0，重新开始
setTimeout(deb, 1000) // 啥也不做，计时器被重置为0，重新开始
setTimeout(deb, 3001) // 从上一次执行deb之后过了2001毫秒，所以action()终于被执行了

第一种用法主要用在防止短时间内被触发多次本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，比如有一个请求，你只允许它在一组操作完【作者：唐霜】【版权所有，侵权必究】成之后才发出，这样可以解决服务器的请求压【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。力，而在前端，则用_.debounce来【版权所有】唐霜 www.tangshuang.net【转载请注明来源】控制，第一次发出请求之后，必须等到2秒之本文版权归作者所有，未经授权不得转载。【本文受版权保护】后再点某个按钮才会发出请求，而在这期间点本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。击按钮，相当于阻止立即发出，重新再等2秒【未经授权禁止转载】原创内容，盗版必究。。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ngnet】【本文受版权保护】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ng.net

而第二种则主要用在延时操作上面，比如有一【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。组按钮，当按钮状态发生变化之后才发请求，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net用户点第一个按钮的时候触发deb()，点【转载请注明来源】转载请注明出处：www.tangshuang.net第二个按钮之后再触发一次deb()，这个【转载请注明来源】原创内容，盗版必究。时候计时器被重置为0，请求不会马上发出去【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，直到用户点完最后一个按钮之后，等了0.【未经授权禁止转载】【原创内容，转载请注明出处】2秒钟，请求才发出去。

【本文受版权保护】【本文受版权保护】【作者：唐霜】

而_.throttle主要用在点击多次后转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net不会马上执行，而是将这些执行按平均每wa未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】it的时间只执行一次，immediate【作者：唐霜】著作权归作者所有，禁止商业用途转载。设置为true和false的区别是，为t原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】rue时点击之后马上执行，为false时【版权所有，侵权必究】【原创内容，转载请注明出处】点击之后等待wait后开始执行，后面就没【版权所有】唐霜 www.tangshuang.net【本文受版权保护】有影响，永远都是隔wait时间后再执行一未经授权，禁止复制转载。【未经授权禁止转载】次，点多少次，执行多少次。用在scrol【转载请注明来源】未经授权，禁止复制转载。l身上比较好，因为scroll会一直一直【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net触发，而且不规律，而使用_.thrott【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】le则可以让这些scroll规律化，实现【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net滚动条平滑滚动。

【作者：唐霜】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ang.net未经授权，禁止复制转载。

不要作为类的方法

【原创不易，请尊重版权】【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ang.net【原创不易，请尊重版权】

当我们写一个类的时候，把_.deboun【本文受版权保护】本文版权归作者所有，未经授权不得转载。ce作为方法，会带来实例化对象之间的计时本文作者：唐霜，转载请注明出处。【转载请注明来源】器混乱。说的简单，请拿代码给我看：

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ang.net

function DebounceTest() {}
DebounceTest.prototype.request = _.debounce(function(tag) {
    console.log(tag, Date.now())
}, 2000, true)
var test1 = new DebounceTest()
var test2 = new DebounceTest()
test1.request(1)
test2.request(2)

你会发现，test2的request没有【作者：唐霜】【转载请注明来源】执行，这是一个不期望得到的结果。你的设想【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】是，通过new来实例化的对象，各自有各自著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。的debounce，test1是test【本文首发于唐霜的博客】【版权所有，侵权必究】1，test2是test2.但是实际上，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】因为我们采用的是prototype进行赋【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】值的方式，也就是说DebounceTes转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett.prototype.request是【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】_.debounce执行后得到的结果，而本文作者：唐霜，转载请注明出处。【转载请注明来源】这个结果绑定在了prototype上，那【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】么所有的实例化对象的request方法都本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。引用同一个_.debounce的结果，所著作权归作者所有，禁止商业用途转载。【转载请注明来源】以上面的test1.request和te本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netst2.request虽然是不同实例化对【转载请注明来源】转载请注明出处：www.tangshuang.net象的操作，却是对同一个_.debounc著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。e的结果函数进行执行。因此，不要将_.d【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netebounce的结果作为类的方法使用。

【关注微信公众号：wwwtangshua【作者：唐霜】【版权所有】唐霜 www.tangshuang.netngnet】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

参考文献：

【作者：唐霜】【版权所有】唐霜 www.tangshu【本文受版权保护】【未经授权禁止转载】ang.net【转载请注明来源】【访问 www.tangshuang.n【原创不易，请尊重版权】未经授权，禁止复制转载。et 获取更多精彩内容】

• 浅谈 Underscore.js 中 _原创内容，盗版必究。【本文受版权保护】.throttle 和 _.deboun本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ce 的差异
未经授权，禁止复制转载。【访问 www.tangshuang.n【本文首发于唐霜的博客】【未经授权禁止转载】et 获取更多精彩内容】
• 节流(Throttling)和去抖(De【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】bouncing)详解
【原创不易，请尊重版权】【本文首发于唐霜的博客】原创内容，盗版必究。

2017-02-06 16170 underscore