zoukankan      html  css  js  c++  java
  • 节流和防抖

    在某些业务场景会频繁触发事件,如果不想频繁触发 这时候就需要用到函数节流和函数防抖了。

    如果频繁用到 且还有去重 深浅拷贝  柯里化 推荐Lodash(https://www.lodashjs.com/

     //防抖函数(函数名,时间,是否立即实行)
     function debounce(func, wait, immediate) {
         let timeout, result;
         let debounced = function () {
             //改变this指向
             let _this = this;
             //改变event指向
             let args = arguments;
             clearTimeout(timeout);
             if (immediate) {
                 //立即执行
                 let callnow = !timeout;
                 timeout = setTimeout(() => {
                     timeout = null;
                 }, wait);
                 if (callnow) {

                     result = func.apply(_this, args);
                 }


             } else {
                 //延迟执行
                 timeout = setTimeout(function () {
                     func.apply(_this, args);
                 }, wait);
             }
             return result;
         }
         //取消操作
         debounced.cancel = function () {
             clearTimeout(timeout);
             timeout = null;
         }
         return debounced;
     }
     
     
     
     
    //节流    频繁执行函数 leading 开始是否触发
    //第一次会输出,最后一次不会被调用 leading:true,trailing:false
    //第一次不会输出,最后一次会被调用 leading:false,trailing:true
    //第一次会输出,最后一次会调用 leading:true,trailing:true
    //  trailing 结束是否触发
    //  throttle
    function throttle(func, wait, options) {
        let _this, args, timeout;
        let old = 0; //时间戳
        if (!options) {
            options = {};
        }
        let later = function () {
            old = new Date().valueOf();
            timeout = null;
            func.apply(_this, args)
        }
        return function () {
            _this = this;
            args = arguments;

            let now = new Date().valueOf();
            if (options.leading === false && !old) {
                old = now;
            }
            if (now - old > wait) {
                //第一次会执行
                if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;

                }
                //立即执行
                func.apply(_this, args)
                old = now;
            } else if (!timeout && options.trailing !== false) {
                //最后一次会执行
                timeout = setTimeout(later, wait);
            }



        }
    }

  • 相关阅读:
    cache 元素 数据类型类(1)
    cache 存储数据访问
    cache类的元素
    COS(cache objectscript)语言及语法cache对象及对象类型
    cache创建数据库
    cache 元素 数据类型类(2)
    usaco1.3.3 Calf Flac 我的题解
    USACO the castle
    Ordered Fractions usaco
    【转】IBM Rational Rose 操作指南(下)
  • 原文地址:https://www.cnblogs.com/jscai/p/12795560.html
Copyright © 2011-2022 走看看