js事件節流

時間 2019-11-06

原文原文鏈接

背景：在監聽瀏覽器滾動條的scroll事件時該事件會觸發不少次，這樣當快速滾動時會有不好的性能，因此要限制事件觸發的頻率，能夠防抖和節流，這裏我記錄簡單的節流方法html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>事件節流</title>
  <style>
    .wrap {
      height: 10000px;
    }
  </style>
</head>

<body>
  <div class="wrap"></div>
  <script>
    var throttle = function (delay,interval, fn) {
      var startTime = new Date().getTime();
      var timer=null;
      return function () {
        var curTime = new Date().getTime();
        clearTimeout(timer);
        console.log(curTime - startTime, interval)
        if (curTime - startTime >= interval) {
          fn.apply(this, arguments)
          startTime = curTime
        }
        else{
          timer=setTimeout(fn,delay)
        }
      }
    }
    window.onscroll = throttle(500,2000, function () {
      console.log('我是水滴')
    })
  </script>
</body>

</html>

　　上面判斷若是此時距離上次觸發達到了某個時間就馬上觸發，不然就延遲多少毫秒再觸發，這樣當持續滾動時代碼會在每次滾動結束後一段時間內觸發一次，同時也會在時間間隔超過一段時間內執行一次。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。