js 节流函数
比如我给一个文本框绑定了click和focus事件,并且这两个事件的处理函数完全相同.
那么通过鼠标点击聚焦的时候,就会执行两次,实例如下:
var updateIndex=function (event) { console.log('updateIndex'); }; var bindEvent=function ($textarea) { $textarea.click(function (event) { updateIndex(); }).focus(function (event) { updateIndex(); }); }; $(function (event) { $('#servletAction2').focus(); bindEvent($('textarea')); });
使用节流函数可以解决这个问题:
var updateIndex=function (event) { console.log('updateIndex'); }; var updateIndexThrottle=throttle3(updateIndex,200); // var updateIndexThrottle=updateIndex; var bindEvent=function ($textarea) { $textarea.click(function (event) { updateIndexThrottle(); }).focus(function (event) { updateIndexThrottle(); }); }; $(function (event) { $('#servletAction2').focus(); bindEvent($('textarea')); });
节流函数源码:
/*** * 需要注意:分支二走完之后,需要清空t_start 吗?<br> * 如果不清空,会有这种清空:执行完分支二之后,马上执行分支一<br> * e.g:var func3=throttle3(myFunc,2000,2100);<br> * 需要保证:(1)连续频繁地点击,则每隔runDelay 秒,必须执行一次;<br> * (2)随意的乱点击,一定会执行至少一次<br> * 定时器执行时,需要重置t_start,否则执行完分支二之后,马上执行分支一<br> * @param fn * @param delay * @param runDelay * @returns {Function} */ function throttle3(fn, delay, runDelay, scope) { var timer = null; var t_start; return function () { //没有传递参数runDelay,但是传递scope if (runDelay && (typeof runDelay != 'number') && (!scope)) { scope = runDelay; } var context = scope || this, args = arguments, t_cur = new Date(); // console.log(context); timer && clearTimeout(timer); if (!t_start) { t_start = t_cur; } // console.log('t_start:'+t_start); // console.log('t_cur:'+t_cur); // console.log('t_cur - t_start:'+(t_cur - t_start)); //runDelay的类型等于'undefined',表示没有传递参数runDelay if ((typeof runDelay != 'undefined') && (t_cur - t_start >= runDelay)) { fn.apply(context, args);//分支一 t_start = t_cur; // console.log('一:' + new Date()); } else { timer = setTimeout(function () {//分支二 fn.apply(context, args); // console.log('二:' + new Date()); t_start = new Date(); }, delay); } } }
参考:http://hw1287789687.iteye.com/blog/2312189