事件稀释 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

你可能感兴趣的:(Deb)