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);
            }



        }
    }

  • 相关阅读:
    gcc帮助资料搜找
    由去掉word文档中的一个GoLand复制后残留的底纹说起
    记录一些有趣网站的链接
    linux cpu调度算法发展过程
    啥叫内核线程-搜集
    了解了下啥叫cfs/bfs
    c++重载运算符两种形式的选择
    概念-乐观锁、悲观锁
    go 移位操作的简单自测-移33或65位
    Shell脚本:(delayexec)Cygwin下调用schtasks创建Windows任务计划,实现延迟或定时执行某一命令
  • 原文地址:https://www.cnblogs.com/jscai/p/12795560.html
Copyright © 2011-2022 走看看