JS防抖和节流

一、防抖debounce

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

/**
 * 将短时间内(delay),频繁多次触发方法(fn),合并为一次触发
 */
function debounce(fn, delay) {
  let timer
  return function() {
    let args = arguments
    let that = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      fn.apply(that, args)
    }, delay)
  }
}

防抖应用场景

1. 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
2. 表单验证
3. 按钮提交事件。
4. 浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。

二、节流throttle

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

时间戳和

/**
 *  用定时器实现
 */
function throttle(fn, delay) {
  let timer
  return function() {
    let args = arguments
    let that = this
    if (timer) {
      return
    }
    timer = setTimeout(function() {
      fn.apply(that, args)
      clearTimeout(timer)
      timer = null
    }, delay)
  }
}

/**
 *  用时间戳实现
 */

function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

节流应用场景

1. 按钮点击事件
2. 拖拽事件
3. onScoll
4. 计算鼠标移动的距离(mousemove)

测试一下

function test(text) {
  console.log(text)
}

let debounceFunc = debounce(test, 500)
let throttleFunc = throttle(test, 500)

let counter = 1

setInterval(function() {
  console.log(111)
  counter++
  if (counter < 20) {
    console.log(222)
    debounceFunc('hello debounce')
    throttleFunc('hello throttle')
  }
}, 200)