js 节流函数 3

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