js简单防抖、节流

函数防抖和函数节流都是防止某一时间频繁触发，但是这两者原理却不一样
注意：下面两个是基础版本，会存在fn返回值无法处理问题

防抖

一段时间内只执行一次，例：
1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

function debounce(fn, ms = 1000) {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, ms)
  }
}

// 测试
const cons = () => { console.log('debounce') }
const debounceFn = debounce(cons, 1000)
window.addEventListener('scroll', debounceFn)

节流

间隔一定时间执行，例：
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。

function throttle(fn, ms = 1000) {
  let isContinue = true
  return function (...args) {
    if (!isContinue) return
    isContinue = false
    setTimeout(() => {
      fn.apply(this, args)
      isContinue = true
    }, ms)
  }
}

// 测试
const cons = () => { console.log('throttle') }
const throttleFn = throttle(cons, 1000)
window.addEventListener('scroll', throttleFn)