首页 > Web开发 > 详细

JS优化常用片断

时间:2019-10-10 17:38:30      阅读:82      评论:0      收藏:0      [点我收藏+]

防抖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的节流、防抖及使用场景

 

JS优化常用片断

原文:https://www.cnblogs.com/sese/p/11649135.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!