经常会在issue里看到测试提的这样的一个bug，使劲儿反复点一个按钮，咔咔咔点点点，发了好多个请求去后台。

1.恁低端测试之：抖动

对于这种人我只想说：用函数防抖来收拾他！

大致的意思就是：延迟一个时间再执行要执行的函数，若在这个延迟时间内再次被触发，那么就把上个定时器给清了，重新setTimout

  function debounce(fn, delay) {
    let timerId
    return function(...args){
      clearTimeout(timerId)
      timerId = setTimeout(()=> {
        fn(...args)
      }, delay)
    }
  }

测试demo：

  <input type="text" id="input">
  
  document.querySelector('#input').addEventListener('input', debounce(handleOnInput, 1500))
  
  function handleOnInput(arg) {
    console.log(arg.target.value);
  }

使劲儿跟那儿输入看看打印的结果呢~(跟防止使劲儿点一个button一个道理)

2.恁高端测试之：节流

最常见的就是scorll事件滚一下触发太多次了，我们想让它在一个时间段内只执行一次（就是让它均匀的被触发，而不是咔咔咔一直触发）

  function throttle(fn, interval, lock=false){
    return function(...args) {
      if(lock) return;
      lock = true
      fn(...args)
      setTimeout(() => {
        lock = false
      }, interval);
    }
  }

意思是：目标函数在执行的时候，用一个变量控制再来控制是否能再次执行，我们会在setTimeout里周期性的把lock置为false.

小伙儿，听说你爱测性能对吧？