节流和防抖

时间：2019-11-22 09:31:39 阅读：86 评论：0 收藏：0 [点我收藏+]

1、事件防抖

在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（mousemove），这种事件有一个特点，在一个正常的操作中，有可能在一个短的时间内触发非常多次事件绑定程序。
DOM操作时很消耗性能的，如果你为这些事件绑定一些操作DOM节点的操作的话，那就会引发大量的计算，在用户看来，页面可能就一时间没有响应，这个页面一下子变卡了变慢了。在IE下，如果你绑定的resize事件进行较多DOM操作可能直接就崩溃了。

这个你轻轻一拖，就会执行几十次，这对性能不友好的。

输入完成后统一发送请求，最后一个人说了算，只认最后一次

如果用户每次输入都发送请求，冗余过多，用户停止输入字符350毫秒后，在发送请求

 window.onscroll=function() {
     console.log("滚动")
 }

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

使用,会发现次数明显的降低了

  window.onscroll = debounce(function () {
            console.log("啊哈哈")
  }, 100)

应用场景

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

2、函数节流

某一段时间只执行一次,比如说350ms固定发送请求

function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}


$('body').on('mousemove', throttle(function (event) {
  console.log('tick');
}, 1000));

应用场景