防抖和节流

idiot_MAN

已于 2022-10-14 10:53:35 修改

阅读量164

点赞数

分类专栏：前端前端面试题文章标签： javascript 前端

于 2022-09-07 21:08:55 首次发布

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126753955

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

前端面试题

12 篇文章 2 订阅

订阅专栏

防抖和节流

文章目录

防抖和节流

防抖【重要】

防抖策略：当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时

应用场景：

用户在输入框中连续输入一串字符串，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效的减少请求次数，节约请求资源

var timer = null   //1-1防抖的timer

$('#ipt').on('keyup', function () {
      // 1-3 清除timer
      clearTimeout(timer)
      
      //省略其他代码....

      // 1-2定义防抖
      // 获取搜索列表
      timer = setTimeout(function () {
        getSuggestList(keywords)
      }, 800)
    })

缓存搜索的列表

1 定义全局缓存对象

var cacheObj= {}

2:将搜索结果存储到缓存对象中

 // 渲染UI结构
    function renderSUggestList(res) {
      // 如果没有数据需要渲染 直接return
      if (res.result.length <= 0) {
        return $('.suggest-list').empty().hide()
      }
      var rows = []
      // console.log(res.result)
      $.each(res.result, function (i, item) {
        // console.log(item[0])

        rows.push(`
            <div class="suggest-item">${item[0]}</div>
            `)
      })

      $('.suggest-list').empty().append(rows.join('')).show()

      // 1获取用户输入的内容 当做键
      var k = $('#ipt').val().trim()
      // 将数据作为值 进行缓存
      cacheObj[k] = res
      // console.log(cacheObj)
    }

3优先从缓存中获取搜索列表

  $('#ipt').on('keyup', function () {
      // 1-3 清除timer
      clearTimeout(timer)
      // 1获取用户输入的内容
      var keywords = $(this).val().trim()
      // 2 判断用户输入的内容是否为空
      // 清空搜索列表
      if (keywords.length <= 0) {
        return $('.suggest-list').empty().hide()
      }
      // console.log(keywords)

      //  先判断缓存中是否有数据
       if (cacheObj[keywords]) {
        return renderSUggestList(cacheObj[keywords])
      }

      // 1-2定义防抖
      // 获取搜索列表
      timer = setTimeout(function () {
        getSuggestList(keywords)
      }, 800)
    })

节流【重点】

节流策略：可以减少一段时间内事件的触发频率

场景：

鼠标连续不断的触发某事件(点击),只在单位时间内触发一次

懒加载时要监听计算滚动条的位置，不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU资源

高铁卫生间是否被占用，由红绿灯控制，红灯表示被占用，绿灯表示可使用
每个人上厕所都要花费5分钟，五分钟之内，被占用的卫生间无法被其他人使用
上一个人使用完毕后，需要将红的重置为绿灯，表示下一个人可以使用卫生间
下一个人在上卫生间之前，需要先判断灯是否为绿灯，来知晓是否能上卫生间


节流阀为空，可以执行下次操作；不为空，不能执行下次操作
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了
每次执行操作前，先判断节流阀是否为空

$(function () {
      // 获取图片
      var angel = $('#angel')

      // 定义一个timer节流阀
      var timer = null

      $(document).on('mousemove', function (e) {
        //每次执行操作前，先判断节流阀是否为空  不为空 不能执行（证明距离上次执行不足16毫秒）
        if (timer) {
          return
        }

        timer = setTimeout(function () {
          console.log(e.pageX, e.pageY)
          angel.css('top', e.pageY + 'px').css('left', e.pageX + 'px')
          timer = null //设置了鼠标跟随效果后，清空节流阀 方便下次开启定时器
        }, 160)
      })
    })

防抖和节流的区别

防抖：事件被频繁触发，防抖能保证只有最后一次触发生效，前面N多次的触发都会被忽略
节流：事件被频繁触发，节流能够减少事件触发的频率，有选择性的执行一部分事件

案例一：跨域搜索

跨域搜索（应用防抖节流）

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<style>
    * {
      margin: 0;
      padding: 0;
    }
    .search-box {
      width: 500px;
      margin: 50px auto;
    }
    .search-box input {
      width: 200px;
      height: 40px;
    }
  </style>
</head>
<body>
  <div class="search-box">
    <input type="text" id="ipt" placeholder="请输入要搜索的内容" />
    <!-- 搜索列表 -->
    <div class="suggest-list">
      <!-- <div class="suggest-item"></div> -->
    </div>
  </div>
</body>
<script>
  // 获取用户输入的搜索关键词

  var timer = null //1-1 防抖的timer

  var cacheObj = {} //定义全局的缓存对象

  // 监听文本框的keyup事件
  $('#ipt').on('keyup', function () {
    // 1-3 清除timer
    clearTimeout(timer)
    // 1获取用户输入的内容
    var keywords = $(this).val().trim()
    // 2 判断用户输入的内容是否为空
    // 清空搜索列表
    if (keywords.length <= 0) {
      return $('.suggest-list').empty().hide()
    }
    // console.log(keywords)

    //  先判断缓存中是否有数据
    if (cacheObj[keywords]) {
      return renderSUggestList(cacheObj[keywords])
    } 

    // 1-2定义防抖
    // 获取搜索列表
    timer = setTimeout(function () {
      getSuggestList(keywords)
    }, 800)
  })

  // 把获取搜索列表的代码，封装到getSuggestList函数中
  function getSuggestList(kw) {
    $.ajax({
      url: 'https://suggest.taobao.com/sug?q=' + kw,
      dataType: 'jsonp',
      success(res) {
        console.log(res.result)
        renderSUggestList(res)
      },
    })
  }

  // 渲染UI结构
  function renderSUggestList(res) {
    // 如果没有数据需要渲染 直接return
    if (res.result.length <= 0) {
      return $('.suggest-list').empty().hide()
    }
    var rows = []
    // console.log(res.result)
    $.each(res.result, function (i, item) {
      // console.log(item[0])

      rows.push(`
          <div class="suggest-item">${item[0]}</div>
          `)
    })

    $('.suggest-list').empty().append(rows.join('')).show()

    // 1获取用户输入的内容 当做键
    var k = $('#ipt').val().trim()
    // 将数据作为值 进行缓存
    cacheObj[k] = res
    // console.log(cacheObj)
  }
</script>
</html>

案例二：鼠标跟随

<html lang="en">
  <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>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #angel {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <img src="./ts.png" width="100" alt="" id="angel" />
  </body>
  <script>
    $(function () {
      // 获取图片
      var angel = $('#angel')

      // 定义一个timer节流阀
      var timer = null

      $(document).on('mousemove', function (e) {
        //每次执行操作前，先判断节流阀是否为空  不为空 不能执行（证明距离上次执行不足16毫秒）
        if (timer) {
          return
        }

        timer = setTimeout(function () {
          console.log(e.pageX, e.pageY)
          angel.css('top', e.pageY + 'px').css('left', e.pageX + 'px')
          timer = null //设置了鼠标跟随效果后，清空节流阀 方便下次开启定时器
        }, 160)
      })
    })
  </script>
</html>

idiot_MAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流

缓存搜索的列表1 定义全局缓存对象2:将搜索结果存储到缓存对象中3优先从缓存中获取搜索列表节流【重点】防抖和节流的区别防抖：事件被频繁触发，防抖能保证只有最后一次触发生效，前面N多次的触发都会被忽略节流：事件被频繁触发，节流能够减少事件触发的频率，有选择性的执行一部分事件案例一：跨域搜索跨域搜索（应用防抖节流）
复制链接

扫一扫