AJAX中防抖的概念与小demo

最新推荐文章于 2024-01-03 15:10:19 发布

我的Y轴是反的

最新推荐文章于 2024-01-03 15:10:19 发布

阅读量215

点赞数

文章标签： ajax 前端 jquery

本文链接：https://blog.csdn.net/vip77778888/article/details/122461915

版权

防抖

防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。

场景：搜索框只在输入完后，才执行查询的请求。

好处：这样可以有效减少请求的次数，节省网络资源。

<!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>
  <!-- 导入页面的基本样式 -->
  <link rel="stylesheet" href="./css/search.css" />
</head>

<body>
  <div class="container">
    <!-- Logo -->
    <img src="./images/taobao_logo.png" alt="" class="logo" />

    <div class="box">
      <!-- tab 栏 -->
      <div class="tabs">
        <div class="tab-active">宝贝</div>
        <div>店铺</div>
      </div>
      <!-- 搜索区域（搜索框和搜索按钮） -->
      <div class="search-box">
        <input type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
          搜索
        </button>
      </div>

      <!-- 搜索建议列表 -->
      <div id="suggest-list">

      </div>
    </div>
  </div>

  <!-- 导入 jQuery -->
  <script src="./lib/jquery.js"></script>
  <!-- 导入 axios -->
  <script src="./lib/axios.js"></script>

  <script>
    // 设置一个空定时器
    let timeID = null
    axios.defaults.baseURL = 'http://www.liulongbin.top:3009'


    $('.ipt').on('input', function () {
      // 在运行前清除延时器
      clearTimeout(timeID)
      let text = $(this).val()
      // 非空和清除判断
      if (text.trim().length === 0) {
        $('#suggest-list').empty()
        return
      }
      // 创建延时器 
      timeID = setTimeout(function () {
        getGet(text)
      }, 500)

    })

    function getGet(kw) {
      axios({
        url: '/api/sug',
        method: 'get',

        params: {
          q: kw
        }
      }).then(({
        data: res 
      }) => {
        //成功回调
        console.log(res)
        let htmlArr = []
        res.result.forEach(value => {
          htmlArr.push(` <div class="suggest-item">${value}</div>`)
        })
        $('#suggest-list').html(htmlArr.join(''))
      })
    }
  </script>
</body>

</html>

我的Y轴是反的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX中防抖的概念与小demo

防抖防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。场景：搜索框只在输入完后，才执行查询的请求。好处：这样可以有效减少请求的次数，节省网络资源。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫