zoukankan      html  css  js  c++  java
  • JS频率控制函数

     1 /**
     2  * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次
     3  * @param  {Function}   fn        需要调用的函数
     4  * @param  {Number}     delay     延迟时间,单位毫秒
     5  * @param  {Boolean}    immediate 给immediate参数传递false绑定的函数先执行,而不是delay后后执行。
     6  * @param  {Boolean}    debounce  是否使用debounce
     7  * @return {Function}             实际调用函数
     8  */
     9 var throttle = function(fn, delay, immediate, debounce) {
    10     var curr = +new Date(), //当前事件
    11         last_call = 0,
    12         last_exec = 0,
    13         timer = null,
    14         diff, //时间差
    15         context, //上下文
    16         args,
    17         exec = function() {
    18             last_exec = curr;
    19             fn.apply(context, args);
    20         };
    21     return function() {
    22         curr = +new Date();
    23         context = this,
    24             args = arguments,
    25             diff = curr - (debounce ? last_call : last_exec) - delay;
    26         clearTimeout(timer);
    27         if (debounce) {
    28             if (immediate) {
    29                 timer = setTimeout(exec, delay);
    30             } else if (diff >= 0) {
    31                 exec();
    32             }
    33         } else {
    34             if (diff >= 0) {
    35                 exec();
    36             } else if (immediate) {
    37                 timer = setTimeout(exec, -diff);
    38             }
    39         }
    40         last_call = curr;
    41     }
    42 };
    43 
    44 /**
    45  * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于delay,fn才会执行
    46  * @param  {Function}   fn        要调用的函数
    47  * @param  {Number}     delay     空闲时间
    48  * @param  {Boolean}    immediate 给immediate参数传递false绑定的函数先执行,而不是delay后执行。
    49  * @return {Function}             实际调用函数
    50  */
    51 var debounce = function(fn, delay, immediate) {
    52     return throttle(fn, delay, immediate, true);
    53 }
  • 相关阅读:
    HTTP 深入详解(HTTP Web 的基础)
    webpack 代码分离
    webpack 常见问题
    细说 webpack 之流程篇
    一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
    Ajax 解决浏览器缓存问题
    十大经典排序算法
    react-redux 之 connect 方法详解
    JS实现继承的几种方式
    GIT常用命令及常见问题解决方法-协作篇
  • 原文地址:https://www.cnblogs.com/huliang56/p/7268259.html
Copyright © 2011-2022 走看看