事件稀释 throttle 与 debounce

事件稀释 throttle 与 debounce

throttle 函数：

window.addEventListener("resize", throttle(callback, 300, {leading:false}));
  window.addEventListener("resize", callback2);
  function callback ()  { console.count("Throttled"); }
  function callback2 () { console.count("Not Throttled"); }
 /**
  * 频率控制函数， fn执行次数不超过 1 次/delay
  * @param fn{Function}     传入的函数
  * @param delay{Number}    时间间隔
  * @param options{Object}  如果想忽略开始边界上的调用则传入 {leading:false},
  *                         如果想忽略结束边界上的调用则传入 {trailing:false},
  * @returns {Function}     返回调用函数
  */
 function throttle(fn,delay,options) {
     var wait=false;
     if (!options) options = {};
     return function(){
         var that = this,args=arguments;
         if(!wait){
             if (!(options.leading === false)){
                 fn.apply(that,args);
             }
             wait=true;
             setTimeout(function () {
                 if (!(options.trailing === false)){
                     fn.apply(that,args);
                 }
                 wait=false;
             },delay);
         }
     }
 }

　　

debounce 函数：

window.addEventListener("resize", throttle(callback, 300, {leading:false}));
window.addEventListener("resize", callback2);
function callback ()  { console.count("Throttled"); }
function callback2 () { console.count("Not Throttled"); }
/**
 * 空闲控制函数， fn仅执行一次
 * @param fn{Function}     传入的函数
 * @param delay{Number}    时间间隔
 * @param options{Object}  如果想忽略开始边界上的调用则传入 {leading:false},
 *                         如果想忽略结束边界上的调用则传入 {trailing:false},
 * @returns {Function}     返回调用函数
 */
function debounce(fn, delay, options) {
    var timeoutId;
    if (!options) options = {};
    var leadingExc = false;

    return function() {
        var that = this,
            args = arguments;
        if (!leadingExc&&!(options.leading === false)) {
            fn.apply(that, args);
        }
        leadingExc=true;
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(function() {
            if (!(options.trailing === false)) {
                fn.apply(that, args);
            }
            leadingExc=false;
        }, delay);
    }
}

　　

原文：http://www.cnblogs.com/zztt/p/4098657.html

posted on 2014-11-18 10:36 风之优雅z 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/windofelegant/p/4105110.html