• 函数节流



    //多次触发某个动作,如onresize事件,窗口变化时会连续触发多次resize事件,消耗性能。可采取在一定时间内触发一次,取消掉无效的触发动作的执行。
    //实现方式1::  指定时间间隔调用delayMethod返回的函数

    //每次调用时,清除上一次的定时器,重新设置一个定时器

    function delayMethod(method,wait){
    var timerId = null;
    return function(){
    var args = arguments;
    var context = this;
    clearTimeout(timerId);
    timerId = setTimeout(function(){
    method.apply(context,args);
    },wait);
    }
    }
    }
    //调用方式
    var wrapHanlder = delayMethod(evtHandler,500);
    $(window).on("resize",function(){
    var params = {};
    wrapHanlder(params); 
    }
    })

    underscore中的实现:

    如果已经设置过定时器则不再设置,等待设定的时间间隔后执行操作,执行完成后重置定时器,timer=null,下次再出发该操作时,再设置定时器。

    /**
    * 函数节流
    * @param func 事件处理函数
    * @param wait 延迟的时间间隔
    * @param immediate 是否立即执行,默认false
    * @return 返回事件处理函数
    */
    function debounce(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    //immediate默认为false
    // 当wait指定的时间间隔期间多次调用_.debounce返回的函数,则会不断更新timestamp的值,导致last < wait && last >= 0一直为true,从而不断启动新的计时器延时执行func
    var later = function() {
    var last = +new Date() - timestamp;
    console.log("last 时间间隔 < 设置的 wait",last,wait);
    if (last < wait && last >= 0) {
    timeout = setTimeout(later, wait - last);
    } else {
    timeout = null;
    if (!immediate) {
    result = func.apply(context, args);
    if (!timeout) context = args = null;
    }
    }
    };
    
    return function() {
    context = this;
    args = arguments;
    timestamp = +new Date();
    // 第一次调用该方法时,且immediate为true,则调用func函数
    var callNow = immediate && !timeout;
    // 在wait指定的时间间隔内首次调用该方法,则启动计时器定时调用func函数
    console.log("timeout",timeout);
    if (!timeout) { console.log("timeout为null时,重新设置定时器");
    timeout = setTimeout(later, wait);
    }
    if (callNow) {
    result = func.apply(context, args);
    context = args = null;
    }
    
    return result;
    };
    };
  • 相关阅读:
    【Linux基础】linux下修改ls显示的时间格式
    【Teradata】gtwglobal查看
    【Teradata】tdlocaledef修改默认日期配置
    【Linux基础】文件处理实例
    【Linux基础】awk命令
    【teradata】强制解锁
    第1节:保存文档
    Centos7安装MySQL数据库
    MyBatis框架之异常处理
    spring事务源码分析
  • 原文地址:https://www.cnblogs.com/lydialee/p/6393544.html
Copyright © 2020-2023  润新知