手写输入框防抖和按钮节流

389 阅读1分钟

面试常见的手写题,防抖和节流,写的是最简单版本的,但是能实现

一、防抖,目的让1秒内随便输入只显示最后一次

<body>
  防抖:<input type="text">
</body>
<script>
  const input = document.querySelector('input')
  let timer = -1
  input.addEventListener('input',()=>{
    clearTimeout(timer)
  timer=setTimeout(()=>{
      console.log('执行了')
    },1000)
  })
</script>

二、节流,目的按钮点击多次,也只会在2秒后生效一次

时间戳方案

<body>
  <button>节流</button>
</body>
<script>
  const btn = document.querySelector('button')
  let n =0
  btn.addEventListener('click',()=>{
    let t = new Date()
    if(t-n>2000){
      console.log('执行了')
      n = t
    }
  })
</script>

定时器方案

const btn = document.querySelector('button')
  let num = true
  btn.addEventListener('click',()=>{
    if(num){
      num = false
    setTimeout(()=>{
        console.log('执行')
        num=true
      },2000)
    }
  })