函数防抖、节流

函数防抖:n秒内只要触发事件,就重新计时,事件处理函数的程序将永远不会被执行

/**
 * 函数防抖
 * @param  {[fn]} 回调方法
 * @param  {[time]} 延迟时间
 * @param  {[immediate]} 是否立即执行
 */

function debounce(fn, time, immediate) {
    var timer = null,
        result;

    var debounced = function() {
         var context = this,
             args = arguments;

        if(timer) clearTimeout(timer);
    
        if(immediate) {
            // 如果已执行,不再执行
           var callNow = !timer;
           timer = setTimeout(function() {
                timer = null;
            }, time);
            if(callNow) {
                result = fn.apply(context, args);
            }
        } else {
            timer = setTimeout(function() {
               result = fn.apply(context, args);
            }, time)
        }
        return result;
    }
    
    debounced.cancel = function() {
        clearTimeout(timer);
        timer = null;
     }

    return debounced;
}

函数节流:事件被触发,n秒内只执行一次事件处理函数

/**
 * 函数节流
 * @param  {[fn]} 回调方法
 * @param  {[delay]} 延迟时间
 */

function throttle(fn, delay) {
    var timer = null,
        begin = new Date().getTime();

    return funcion() {
        var context = this,
            args = arguments,
            now = new Date().getTime();

        clearTimeout(timer);

        if(now - begin >= delay) {
            fn.apply(context, args);
            begin = now;
        } else {
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay)
        }
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 定义 在JS里,有一些事件是很容易频繁触发的,比如窗口的resize、scroll、鼠标的onmousemove等...
    Rudy_Ran阅读 186评论 0 2
  • 定义 在JS里,有一些事件是很容易频繁触发的,比如窗口的resize、scroll、鼠标的onmousemove等...
    瑞哦利阅读 307评论 0 0
  • 在前端开发中有一部分用户行为会频繁出发事件执行。而对于DOM操作、资源加载等耗性能的处理,很可能导致界面卡顿,甚至...
    她是我的bug阅读 528评论 0 0
  • 概念 函数防抖(debounce) 函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发...
    陶新群阅读 806评论 0 0
  • 序言 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, ons...
    墨鱼侃侃阅读 256评论 0 0