函数的防抖与节流

防抖（debounce）

所谓防抖，就是触发时间后再一定时间内只执行一次，如果在一定时间内有触发该事件，则会重新计算函数执行时间

• 防抖分为非立即执行和立即执行两种

非立即执行

function debounce(func, delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

立即执行

function clickStop(func, delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    } else {
      func.apply(this, args)
    }
    timer = setTimeout(() => {
      timer = null
    }, delay)
  }
}

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

• 对于节流，一般有两种方式可以实现，分别是时间戳和定时器方式。

时间戳

function throttle(func, delay) {
    let previous = 0;
    return function(...args ) {
        let now = Date.now()
        if (now - previous > delay) {
            func.apply(this, args);
            previous = now;
        }
    }
}
var fn = throttle(function() {
    console.log('-----')
}, 1000)
setInterval(a, 100)

定时器

function throttle(func, delay) {
    let timer;
    return function(...args) {
        if (!timer) {
            timer= setTimeout(() => {
                timeout = null;
                func.apply(this, args)
            }, delay)
        }
    }
}