函数防抖

• 概念：延迟要执行的动作，如果在延时的这段时间重新触发了，则重新计时.
• 举例：假设电脑息屏设置为1分钟，若你在一分钟内没操作则息屏，反之重新计时1分钟.
• 应用：搜索时等用户输入完之后再发送请求

简单应用

 let inputNode = document.getElementById('user_input') // 获取输入框dom元素
  let time // 用一个变量保存定时器
  inputNode.addEventListener('keyup',function () { // 绑定一个键盘事件
    let value = inputNode.value
    if(time){ // 如果定时器存在则清除
      clearTimeout(time)
    }
    time = setTimeout(()=>{ // 设置一个定时器
      sendAjax(value)
    },300)
  })
  
  function sendAjax(data) {
    console.log(`发送了一次Ajax请求，内容为${data}`)
  }

函数节流

• 概念：设定一个特定的时间，让函数在特定的时间内只执行一次，不会频繁执行
• 举例：fps游戏，鼠标按住不松手，子弹也不会连成一条线
• 实现：定时器、标识
• 需求：在鼠标滚轮滚动的时候，每隔2秒钟，打印一次

简单应用

  let canLog = true
  document.body.onscroll=function(){
    if(canLog) {
      console.log(111);
      canLog = false
      setTimeout(() => {
        canLog = true
      }, 1000);
    }
  }