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

文章目录

  • 1.防抖
  • 2.节流

1.防抖

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


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
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.节流

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


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
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>

你可能感兴趣的:(前端,JavaScript,js,javascript,前端)