2020-10：节流&防抖及其应用场景和原理

最新推荐文章于 2024-08-22 11:09:58 发布

Sylvia_2000

最新推荐文章于 2024-08-22 11:09:58 发布

阅读量330

点赞数

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

本文链接：https://blog.csdn.net/ciel_2/article/details/112162647

版权

前端同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

2020

18 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

文章目录

1.防抖
2.节流

1.防抖

只要不是最后一次触发，就不执行异步请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="height:2000px">

  <script>
    var timer // undefined
    window.onscroll = function(){

      // 如果当前timer不为空，说明前面有一个等待的请求还未发送。则清空计时，
      if(timer !== undefined){
        clearTimeout(timer)
      }

      // 开始计时
      timer = setTimeout(() => {
        // 当200ms内未发生滚动时，才发送正式的ajax请求
        console.log('发送ajax请求，加载更多数据。。。')
      }, 200)

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

2.节流

第一次发送请求后，只要响应没回来，就不能发送第二次

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="height:2000px">
  <button id="btn" style="position:fixed;right: 200px;bottom: 200px;">加载更多</button>

  <script>
    // 节流：第一次发送请求后，只要响应没回来，就不能发送第二次
    var canClick = true // 开关变量，标记是否可以发送下次请求
    btn.onclick = function(){ // 如果当前开关开着，说明可以单击
      if(canClick){
        canClick = false // 先关闭开关
        console.log('发送ajax请求，加载更多数据。。。') // 再发送请求
        setTimeout(() => {
          console.log('加载完成')
          canClick = true // 在请求的回调函数结尾，重新打开开关，允许下次单击
        }, 3000);
      }
    }
    // 防抖：只要不是最后一次触发，就不执行异步请求
    var timer // undefined
    window.onscroll = function(){

      // 如果当前timer不为空，说明前面有一个等待的请求还未发送。则清空计时，
      if(timer !== undefined){
        clearTimeout(timer)
      }

      // 开始计时
      timer = setTimeout(() => {
        // 当200ms内未发生滚动时，才发送正式的ajax请求
        console.log('发送ajax请求，加载更多数据。。。')
      }, 200)

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