zoukankan      html  css  js  c++  java
  • JS优化常用片断

    防抖debounce装饰器

    在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

    function debounce(func, delay) {
      let isCooldown = false;
      return function() {
        if (isCooldown) return;
        func.apply(this, arguments);
        isCooldown = true;
        setTimeout(() => isCooldown = false, delay);
      };
    }

     

    节流throttle装饰器

    规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

    function throttle(func, delay) {
    
      let isThrottled = false,
        savedArgs,
        savedThis;
    
      function wrapper() {
    
        if (isThrottled) { // (2)
          savedArgs = arguments;
          savedThis = this;
          return;
        }
    
        func.apply(this, arguments); // (1)
    
        isThrottled = true;
    
        setTimeout(function() {
          isThrottled = false; // (3)
          if (savedArgs) {
            wrapper.apply(savedThis, savedArgs);
            savedArgs = savedThis = null;
          }
        }, delay);
      }
    
      return wrapper;
    }

    2者区别:

    • 函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
    • 函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。

    应用场景:

    • debounce
      •   search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
      •   window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次。
    • throttle
      •   鼠标不断点击触发,mousedown(单位时间内只触发一次)。
      •   监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断。

    参考文档:

    装饰和转发,call/apply

    7分钟理解JS的节流、防抖及使用场景

  • 相关阅读:
    Android读写SD卡
    如何用c语言调用c++做成的动态链接库
    css3 翻转和旋转的区别
    若干道Swift面试题
    可控制导航下拉方向的jQuery下拉菜单代码
    Mysql主从备份和SQL语句的备份
    .net 读书笔记
    .NET框架体系结构
    原则干货存起来
    【转】php和java之间rsa加密互通
  • 原文地址:https://www.cnblogs.com/sese/p/11649135.html
Copyright © 2011-2022 走看看