防抖和节流函数

78 阅读1分钟

函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover,input输入框的keypress等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能,

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

节流:每隔一段时间,只执行一次函数。

/* 防抖 */
export function _debounce(fn, delay) {
  var delays = delay || 200;
  var timer;
  return function () {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      timer = null;
      fn.apply(th, args);
    }, delays);

  };
}
/* 节流 */
export function throttle(fn, delay) {
  var prev = Date.now()
  return function () {
    var now = Date.now()
    if (now - prev > delay) {
      fn()
      prev = Date.now()
    }
  }
}