截流函数

  • 创建并返回一个像节流阀一样的函数,当重复调用函数的时候,至少每隔 wait毫秒调用一次该函数。对于想控制一些触发频率较高的事件有帮助。
  • 默认情况下,throttle将在你调用的第一时间尽快执行这个function,并且,如果你在wait周期内调用任意次数的函数,都将尽快的被覆盖。如果你想禁用第一次首先执行的话,传递{leading: false},还有如果你想禁用最后一次执行的话,传递{trailing: false}。
/**
* 截流函数
* @param fn   需要执行的函数
* @param wait   等待的时间
* @param options   leading:false 禁用第一次执行; trailing:false 禁用最后一次执行
*/
const throttle = function(fn,wait,options){
    //定义定时器函数、上下文对象、参数、返回结果
    let timeout,context,args,result;
    // 上一次执行的时间戳
    let previos = 0;
    //如果没有options,则赋值为空对象
    if(!options) options = {};
    //定义延迟执行函数
    const later = function(){
        // 禁用第一次执行,则上次执行为0;否则为当前时间
        previos = options.leading === false ? 0 : (new Date()).valueOf();
        // 清除timeOut(因为已经是在timeout执行方法内,不需要clear)
        timeout = null;
        //执行函数
        result = fn.apply(context,args);
        // 清除定时器
        if(!timeout) context = args = null;
    }
    // 定义截流函数
    const throttled = function(){
        //获取当前时间戳
        let now = (new Date()).valueOf();
        //如果没有之前执行的时间并且禁用第一次执行,上次执行时间为当前时间
        if(!previos && options.leading === false) previos = now;
        // 计算执行等待时间
        // 等待时间 - (当前时间 - 上一次执行时间)
        let remaining = wait - (now - previos);
        // 上下文对象为当前this
        context = this;
        //args为数组格式
        args = arguments;
        //如果执行等待时间,不落在wait内,则执行。
        if(remaining <= 0 || remaining > wait){
            // 如果有计时器
            if(timeout){
                clearTimeout(timeout);
                timeout = null;
            }
            // 上次执行时间记录为当前
            previos = now;
            //替换函数this执行
            result = fn.apply(context,args);
            // 如果没有计时器,清除context 和 args
            if(!timeout) context = args = null;
        }
        //如果没有计时器,并且禁用最后一次执行
        else if(!timeout && options.trailing !== false){
            timeout = setTimeout(later,remaining);
        }

        return result;
    }
    //定义截流函数的取消方法
    throttle.cancel = function(){}
    //返回截流函数执行
    return throttled;
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 以前处理过高频事件,但是没有好好总结弄一下,这回抽点时间说一下。5 做过动画效果的同学一定经常碰到滚动控制的问题,...
    eveah阅读 5,609评论 0 1
  • 防抖 运行方式:在第一次触发事件时,不立即执行函数,而是给出一个期限值比比如200ms,1,如果在200ms内没有...
    追梦_3c87阅读 1,882评论 0 0
  • 在上一篇文章 JavaScript-函数防抖[http://www.chenhanpeng.com/javascr...
    前端极客技术阅读 598评论 0 1
  • 函数节流 函数节流,throttle:某个函数在特定时间段内只执行第一次,周而复始,直到指定时间段结束。 节流是在...
    hellomyshadow阅读 334评论 0 1
  • 前言 最近和前端的小伙伴们,在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是,想深入研究一下两者...
    youthcity阅读 23,791评论 5 78

友情链接更多精彩内容