防抖节流的例子

大可大可抖

于 2022-10-17 11:01:11 发布

阅读量91

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/p930318/article/details/127359563

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

防抖：在事件触发后N秒内只执行一次，如果出发了重新计算执行时间。例如模糊搜索的keyup事件运用

<body>
  <div><input id="name" value=""/></div>
</body>
<script>
  let name = document.getElementsByTagName('input')
  let keEvent = document.addEventListener('keyup',function(e){
    eventDebonce(e.target.value)
  });

  function debounce (delay,callback){
    let timer;
    return function(value){
      clearTimeout(timer)
      timer = setTimeout(function(){
        callback(value)  
       
      },delay)
    }
  }
  let eventDebonce = debounce(1000,fn)
   function fn(value){
    console.log(value)
   }

</script>

节流：连续触发事件，N秒内只执行一次

<body>
    <div><button id = 'bttton'>点击</button></div>
</body>
<script>

  document.getElementById('bttton').onclick = throttle(2000,fc)

  function throttle(delay,fc){
    console.log('ui')

    let timeOut
    return function(){
      if(!timeOut){
        timeOut = setTimeout(function(){
          fc();
          timeOut = null
        },delay)
      }
      
    }
  }
  
  function fc(){
    console.log(Math.random())
  }