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);
        };
    };
  • 相关阅读:
    判断文件结束,feof……
    第五篇 分治思想(例子待加)
    第四篇 枚举思想
    第三篇 贪心思想
    第二篇 递归思想
    第一篇 递推思想
    爬虫系列
    整数划分问题
    html中a标签做容器的问题
    H5学习小结——div+css创建电子商务静态网页
  • 原文地址:https://www.cnblogs.com/mrxia/p/4554950.html
Copyright © 2011-2022 走看看