Ajax - 函数防抖与节流 / loading

最新推荐文章于 2023-12-26 09:49:15 发布

Henry_ww

最新推荐文章于 2023-12-26 09:49:15 发布

阅读量323

点赞数

分类专栏：前端文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/Henry_ID/article/details/120164522

版权

前端专栏收录该内容

19 篇文章 4 订阅

订阅专栏

没有函数防抖的效果

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" id="username" />
    <script src="./libs/jquery/jquery.js"></script>
    <script>
      // Register - 验证用户名是否可用
      // input事件只要文本框的内容变化，就会触发
      // 需求：当用户的输入在2秒之内没有更改的时候，意味着用户的输入暂时完毕，那么就应该发起异步请求验证用户名是否存在
      $('#username').on('input', function() {
        let str = $(this).val()
        // 重新计算，重新添加定时器
        $.ajax({
          type: 'get',
          url: 'http://127.0.0.1:3001/validate',
          data: {
            userName: str
          },
          success: res => {
            console.log(res)
          }
        })
      })
    </script>
  </body>
</html>

添加了函数防抖的效果

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" id="username" /> <span class="msg"></span>
    <script src="./libs/jquery/jquery.js"></script>
    <script>
      let timeid = null
      // Register - 验证用户名是否可用
      // input事件只要文本框的内容变化，就会触发
      // 需求：当用户的输入在2秒之内没有更改的时候，意味着用户的输入暂时完毕，那么就应该发起异步请求验证用户名是否存在
      $('#username').on('input', function() {
        let str = $(this).val()
        if (timeid) {
          clearTimeout(timeid)
        }
        // 重新计算，重新添加定时器
        // 防抖：主要是将操作添加到延迟中，在指定时间范围内如果用户又进行了操作，则重新计时

        // 防抖：只执行最后一次
        timeid = setTimeout(() => {
          $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:3001/validate',
            data: {
              userName: str
            },
            success: res => {
              console.log(res)
              $('.msg').text(res.msg)
            }
          })
        }, 2000)
      })
    </script>
  </body>
</html>

未添加节流

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>节流</h1>
    <button>获取数据</button>
    <script src="./libs/jquery/jquery.js"></script>
    <script>
      // 1.定义一个标记
      let time = null
      $('button').on('click', function() {
        // 2.判断标记，是否响应本次请求
        if (time) {
          return
        }
        time = setTimeout(() => {
          $.ajax({
            url: 'http://127.0.0.1:3001/getStudentsJSONDelay',
            success: function(res) {
              console.log(res)
            },
            complete: function() {
              // 本次请求响应成功之后，将time重置为null
              time = null
            }
          })
        }, 0)
      })
    </script>
  </body>
</html>

bool值实现节流 / loading效果

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>节流</h1>
    <button>获取数据</button>
    <script src="./libs/jquery/jquery.js"></script>
    <script>
      // 1.定义一个标记:是否正在加载数据
      let loading = false
      $('button').on('click', function() {
        if (loading) { // 如果正在加载数据，则不响应本次请求了
          return
        }
        // 2.判断标记，是否响应本次请求
        $.ajax({
          url: 'http://127.0.0.1:3001/getStudentsJSONDelay',
          beforeSend: function() {
            loading = true // 说明正在加载数据
          },
          success: function(res) {
            console.log(res)
          },
          complete: function() {
            // 本次请求响应成功之后，将time重置为null
            loading = false
          }
        })
      })
    </script>
  </body>
</html>

Henry_ww

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax - 函数防抖与节流 / loading

没有函数防抖的效果<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body&
复制链接

扫一扫