-loading加载效果--/防抖优化-/节流优化-

最新推荐文章于 2024-04-16 10:10:01 发布

喵帕斯_喵太

最新推荐文章于 2024-04-16 10:10:01 发布

阅读量629

点赞数 1

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/117200266

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

01-loading加载效果

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击获取英雄数据</button>
    <br />
    <!-- Loading 结构，默认隐藏 -->
    <img class="loading" hidden src="./img/loading.gif" alt="" />
    <script src="./libs/jquery.min.js"></script>
    <script>
      $('button').click(() => {
        $.ajax({
          type: 'get',
          url: 'http://127.0.0.1:3001/getStudentsJSONDelay',
          success: (res) => {
            console.log('请求成功 success', res)
          },
          // 请求前会自动触发
          beforeSend: () => {
            console.log('请求前会自动触发 beforeSend')
            // 请求发送前：显示加载效果
            $('.loading').show()
          },
          // 请求完成后自动触发(成功失败都会执行)
          complete: () => {
            console.log('请求完成后自动触发 complete')
            // 请求完成后，隐藏加载效果
            $('.loading').hide()
          },
        })
      })
    </script>
  </body>
</html>

02-防抖优化

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>搜索提示效果</h1>
    <input class="search-input" type="text" />
    <ul id="list"></ul>
    <script src="./libs/jquery.js"></script>
    <script src="./libs/template-web.js"></script>
    <script id="hero" type="text/html">
      {{ each list v }}
      <li>{{ v.name }}</li>
      {{ /each }}
    </script>

    <script>
      // 🔔 准备一个变量，用于存放延时器id
      let timerId
      // keyup 键盘事件可以同步获取输入框的内容
      $('.search-input').keyup(function () {
        // 获取输入框内容
        const str = $(this).val().trim()
        // console.log(str)
        // 🔔 如果之前有延时器，则根据id清除掉之前的延时器
        if (timerId) clearTimeout(timerId)
        // 🔔 启动延时器，把并存储延时器的 id
        timerId = setTimeout(() => {
          $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:3001/getHeroList',
            data: { heroName: str },
            success: (res) => {
              console.log(res)

              const htmlStr = template('hero', { list: res.data })
              $('#list').html(htmlStr)
            },
          })
        }, 500)
      })
    </script>
  </body>
</html>

03-节流优化

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>节流：技能冷却/抢票...-</button>
    <script src="./libs/jquery.min.js"></script>
    <script>
      // 初始化延时器，默认没有延时器
      let timerId = null
      $('button').click(function () {
        // 🎃 如果有延时器正在执行，则退出
        if (timerId) return
        // 启动延时器，存储延时器的 id 
        timerId = setTimeout(() => {
          console.log('放技能/抢票...')
          // 当定时器执行完毕，重置延时器变量，重新表示默认没有延时器
          timerId = null
        }, 500)
      })
    </script>
  </body>
</html>

喵帕斯_喵太

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
-loading加载效果--/防抖优化-/节流优化-

01-loading加载效果<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫