虽然debounce已经被大家玩腻了,但本文作者:唐霜,转载请注明出处。【转载请注明来源】是当我们在一个类里面用的时候,总是还会遇【关注微信公众号:wwwtangshuangnet】【本文受版权保护】到一些麻烦,比如一个页面有三个来自同一个【未经授权禁止转载】【原创不易,请尊重版权】类的实例化对象,每个对象中对自己的一些操【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】作需要用到debounce,是不是意味着【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。必须将this传入到debounce,从【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。而让每个debounce从属于这个对象?【未经授权禁止转载】未经授权,禁止复制转载。于是我对debounce函数进行了改造,【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net使得它可以不再获得一个函数来执行,而是直原创内容,盗版必究。【作者:唐霜】接执行函数:
【版权所有】唐霜 www.tangshu【本文受版权保护】转载请注明出处:www.tangshuang.netang.net【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net原创内容,盗版必究。/**
@desc ensure a given task doesn't fire so often that it bricks browser performance
@param object context: this
@param string|function factory: function to run, if you pass a string, it will find context[factory]
@param number wait: time to wait, ms @param boolean immediate: whether to run factory right now
@usage1: `Util.debounce(this, this.request, 200, true)`, run this.request immediately and never run again in 200ms. use first call in 200ms
@usage2: `Util.debounce(this, 'request', 200)`, run this.request after 200ms,time clock will be reset if you call again. use last call in last 200ms
@usage3: `var factory = this.alert.bind(this, 'word');Util.debounce(this, factory, 200)`, use bind to pass parameters, if you bind, this will not be change by debounce
notice:
1.you can use this in factory function and do not need to use `this.request.bind(this)`, factory will bind context automaticly;
2.you must pass factory function name, anonymous function is not allow;
3.no parameters for factory function, unless you use bind and pass function name;
4.context in arrow function will not change;
*/
function debounce(context, factory, wait, immediate) {
if(typeof factory === 'string') {
factory = context[factory];
}
if(typeof factory !== 'function') {
return;
}
var queue = context._$$debounce = context._$$debounce || {};
var timer = queue[factory];
var isCallNow = immediate && !timer;
var call = function(factory) {
// original function
if(typeof factory.prototype === 'object') {
factory.call(context);
return;
}
// bound function or arrow function
factory();
};
var delay = function() {
queue[factory] = null;
if(!immediate) {
call(factory);
}
};
clearTimeout(timer);
queue[factory] = setTimeout(delay, wait);
if(isCallNow) {
call(factory);
}
}
使用方法很简单,主要是在类的原型链方法中本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。去使用。
原创内容,盗版必究。【关注微信公众号:wwwtangshua【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】class Cat {
walk() {}
say() {
debounce(this, this.walk, 200, true)
}
}
这样就可以使得其实例化对象拥有这个deb【本文受版权保护】转载请注明出处:www.tangshuang.netounce,当实例化对象调用say方法时【转载请注明来源】原创内容,盗版必究。,会立即执行自身的walk方法,但是在接【未经授权禁止转载】【本文首发于唐霜的博客】下来的200ms内,不会再执行第二次。
著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】这个用法也简化了underscore中d转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。ebounce的用法:
本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。【本文受版权保护】// underscore中
var factory = debounce(function() {}, 200, true)
factory()
必须先执行一次debounce,得到它的【作者:唐霜】【未经授权禁止转载】返回值,这个函数才是反复执行时可以被防抖原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net的函数。而采用本文的方法,则可以不再依靠原创内容,盗版必究。未经授权,禁止复制转载。这个第三方变量factory,而是直接执本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。行debounce函数即可。
本文作者:唐霜,转载请注明出处。【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】ang.net究其原理,就是在debounce中利用第著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】一个参数context记录了要执行的fa【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】ctory是否是正处于queue中的函数【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net,如果是,就不会被再次执行。这也为什么要原创内容,盗版必究。本文作者:唐霜,转载请注明出处。求factory不是匿名函数的原因,因为【本文受版权保护】本文作者:唐霜,转载请注明出处。如果是匿名函数,每一个factory都是本文作者:唐霜,转载请注明出处。【转载请注明来源】不一样的。如果想使用匿名函数,应该考虑使转载请注明出处:www.tangshuang.net【未经授权禁止转载】用underscore的debounce原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】,本文恰恰是为了解决在同一个实例化对象的转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】不同方法中使用debounce的问题。情本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。景不同,解决方法也就自然不一样了。
【本文受版权保护】【版权所有,侵权必究】
