js 节流

最新推荐文章于 2024-02-26 16:56:39 发布

是你现任没错了

最新推荐文章于 2024-02-26 16:56:39 发布

阅读量241

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43527043/article/details/126949409

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

节流=是在规定时间长度不能再触发，也就是我想你五秒后再做，设立一个开始时间，从现在到开始超过五秒了你才可以触发。也就是两个时间的相减。
而防抖则是设置settimeout。两者都是为了限制函数的执行次数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="submit" id="input">
<script type="text/javascript">
  //节流是为了减少当前一段时间触发的频率 而防抖则是多次变一次
  var btn=document.getElementById('input');
  btn.addEventListener('click',abdn(submit,2000),false);
  function submit(){
    console.log('1')
  }
  function abdn(fn,delay){
    var beginTime=0
    return function(){
      var curTime=new Date().getTime()
      //就是说两个时间间隔超过了要求的时间长度，则触发，并将开始时间设置为当前时间，继续执行。
      if (curTime-beginTime>delay){
        fn.apply(this,arguments);
        beginTime=curTime
      }
    }
  }

</script>
</body>
</html>