防抖与节流

防抖

防抖要解决的问题:阻止一个事件被频繁触发。
例如:当我们监听浏览器的滚动条事件时,如果不做防抖,就会发生滚动一次鼠标滚轮,事件被触发6-8次。
应用场景:等用户的鼠标滚轮滚动到某一个地方,停止滚动1秒之后才执行函数。
解决思路:设置一个触发函数执行的「等待时间」,当「等待时间」结束之后才可以被执行。

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

var fn = function () {
  console.log('boom')
}

setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发,之后每1000ms触发一次

setInterval(debounce(fn,2000),1000) // 不会触发一次(我把函数防抖看出技能读条,如果读条没完成就用技能,便会失败而且重新读条)

节流

节流要解决的问题:和防抖一样,都是阻止一个事件被频繁触发
区别:防抖是「等待时间」结束之后再执行函数,而节流是先执行函数,然后再计时,确保计时没有结束之前函数不会再次执行。
应用场景:用户在网页的Input表单输入框中按住了某一个按键,但是我们要做到函数不被连续触发,而是每1秒执行1次

function throttle(fn, gapTime) {
  let _lastTime = null;

  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}

let fn = ()=>{
  console.log('boom')
}

setInterval(throttle(fn,1000),10)

 

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:227 次浏览