zoukankan      html  css  js  c++  java
  • 学习笔记 -- js节流函数

     /*
     * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次
     * @param fn {function}  需要调用的函数
     * @param delay  {number}    延迟时间,单位毫秒
     * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行。
     * @return {function}实际调用函数
     */
    commFun.throttle = function (fn,delay, immediate, debounce) {
        var curr = +new Date(),//当前时间
            last_call = 0,
            last_exec = 0,
            timer = null,
            diff, //时间差
            context,//上下文
            args,
            exec = function () {
                last_exec = curr;
                fn.apply(context, args);
            };
        return function () {
            curr= +new Date();
            context = this,
                args = arguments,
                diff = curr - (debounce ? last_call : last_exec) - delay;
            clearTimeout(timer);
            if (debounce) {
                if (immediate) {
                    timer = setTimeout(exec, delay);
                } else if (diff >= 0) {
                    exec();
                }
            } else {
                if (diff >= 0) {
                    exec();
                } else if (immediate) {
                    timer = setTimeout(exec, -diff);
                }
            }
            last_call = curr;
        }
    };
    
    /*
     * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 delay,fn 才会执行
     * @param fn {function}  要调用的函数
     * @param delay   {number}    空闲时间
     * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行。
     * @return {function}实际调用函数
     */
    
    commFun.debounce = function (fn, delay, immediate) {
        return commFun.throttle(fn, delay, immediate, true);
    };

     简易版:

    /*js节流函数*/
    commFun.throttle = function (fn, delay) {
        var timer = null;
        return function () {
            var context = this, args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay ? delay : 200);
        };
    };
  • 相关阅读:
    简单批处理内部命令简介(转)
    CPU 内存 频率 DDR DDR2 DDR3
    python 正则表达式
    bat 脚本 > >> 管道
    python 多进程 无数进程 重复进程 死机
    NLP相关期刊和会议
    deamon tools dtsoft virtual cdrom device 失败 错误
    占位
    2011年07月03日的日记
    每周总结(第二周)
  • 原文地址:https://www.cnblogs.com/mrxia/p/4554950.html
Copyright © 2011-2022 走看看