防抖与节流

防抖与节流

函数防抖(debounce)

  当持续触发事件时,一定事件段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发事件,就重新开始延时

function debounce(fn, wait) {
  let timeout = null;
  return function() {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  };
}

函数节流(throttle)

  函数的节流(throttle):当持续触发事件时,保证在一定时间段内只调用一次事件处理函数

var throttle = function(func, delay) {
  var prev = Date.now();
  return function() {
    var now = Date.now();
    if (now - prev >= delay) {
      func.apply(this, arguments);
      prev = Date.now();
    }
  };
};

区别

  函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现

适用场景

  • 函数防抖:表单多次提交、表单组件内容验证
  • 函数节流:滚动加载

  转载请注明: 迷一样的自信 防抖与节流

 上一篇
apply、call、bind apply、call、bind
apply、call、bind的用法apply 参数一: 改变this的指向(不传参,默认指代当前环境的this) 参数二: 数组,但是实际的话他会以...arguments呈现(也就是说会把数组转化为参数列表)['a',&
2018-01-26
下一篇 
事件轮询 事件轮询
事件轮询解释  主线程从任务队列中读取事件,这个过程是循环不断的。   所有任务都可以分为:同步任务(都在主线程)与异步任务(任务队列中)。 运行的机制 所有同步任务都在主线程上执行,形成一个执行栈(每执行一条代码,向栈中压入这条代码)。
2018-01-14
  目录