脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → javascript的防抖和节流

老生常谈Javascript的防抖和节流

 更新时间：2022年02月11日 11:26:27   作者：执手天涯@  
这篇文章主要为大家详细介绍了Javascript的防抖和节流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1. 什么是防抖

【解释】： 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

【图解】：

在这里插入图片描述

【作用】：

当用户频繁触发该事件的时候，确保只进行最后一次的请求操作，节约请求的资源

【实现输入框的防抖】：

var timer = null                    // 1. 防抖动的 timer
 function debounceSearch(keywords) { // 2. 定义防抖的函数
    timer = setTimeout(function() {
    // 发起 JSONP 请求
    getSuggestList(keywords)
    }, 500)
 }
 $('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
    clearTimeout(timer)
    // ...省略其他代码
    debounceSearch(keywords)
 })

【实现建议框缓存】：

定义全局缓存对象

  // 缓存对象
  var cacheObj = {}

将搜索结果保存到缓存对象中

 // 渲染建议列表
 function renderSuggestList(res) {
    // ...省略其他代码
   // 将搜索的结果，添加到缓存对象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }

优先从缓存中获取搜索建议

 // 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    // ...省略其他代码
    // 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }
    // 获取搜索建议列表
    debounceSearch(keywords)
  })

2、什么是节流

【解释】： 减少一段时间内事件的触发频率。也叫节流策略。

【图解】：

在这里插入图片描述

【应用】

  • 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
  • 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

【鼠标跟随案例】：

<!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>Document</title>
  <script src="./lib/jquery.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #angel {
      position: absolute;
    }
  </style>
</head>
<body>
  <img src="./angel.gif" alt="" id="angel" />
  <script>
    $(function () {
      // 获取图片元素
      var angel = $('#angel')
      // 绑定鼠标移动事件
      $(document).on('mousemove', function (e) {
        // 获取鼠标到x和y轴的距离设置给图片的高和左
        $(angel).css('top', e.pageY-40 + 'px').css('left', e.pageX-40 + 'px')
      })
    })
  </script>
</body>
</html>

3、节流阀

【解释】：

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

【使用节流优化】：

<!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>Document</title>
  <script src="./lib/jquery.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #angel {
      position: absolute;
    }
  </style>
</head>
<body>
  <img src="./angel.gif" alt="" id="angel" />
  <script>
    $(function () {
      // 定义一个节流阀
      var timer = null;
      // 获取图片元素
      var angel = $('#angel')
      // 绑定鼠标移动事件
      $(document).on('mousemove', function (e) {
        // 判断节流阀是否为空
        if (timer) return
        // 控制节流阀的时间
        timer = setTimeout(function () {
          // 获取鼠标到x和y轴的距离设置给图片的高和左
          $(angel).css('top', e.pageY - 40 + 'px').css('left', e.pageX - 40 + 'px')
          // 清空节流阀
          timer = null
        }, 100)
      })
    })
  </script>
</body>
</html>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!   

您可能感兴趣的文章:

相关文章

  • JavaScript函数模式详解

    JavaScript函数模式详解

    文章对javascript的四种函数模式进行了详细的解释，并附上示例，方便小伙伴们理解并应用，希望对大家能有所帮助。
    2014-11-11
  • 在Javascript中处理数组之toSource()方法的使用

    在Javascript中处理数组之toSource()方法的使用

    这篇文章主要介绍了在Javascript中处理数组之toSource()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • javascript的数组方法大全

    javascript的数组方法大全

    这篇文章主要为大家介绍了javascript的数组方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • JavaScript表达式:URL 协议介绍

    JavaScript表达式:URL 协议介绍

    javascript:后面可以是表达式或者使用分号分隔的表达式集合如javascript: 5 + 4，感兴趣的朋友可以参考下或许可以帮助到你
    2013-03-03
  • js中 关于undefined和null的区别介绍

    js中 关于undefined和null的区别介绍

    本篇文章小编将为大家介绍，js中 关于undefined和null的区别，有需要的朋友可以参考一下
    2013-04-04
  • PHP守护进程实例

    PHP守护进程实例

    这篇文章主要介绍了PHP守护进程实例,php也是可以直接进行守护进程的启动与终止的,相对于shell来说会简单很多,需要的朋友可以参考下
    2015-03-03
  • JavaScript方法和技巧大全

    JavaScript方法和技巧大全

    JavaScript方法和技巧大全...
    2006-12-12
  • 好好了解一下Cookie(强烈推荐)

    好好了解一下Cookie(强烈推荐)

    Cookie是由服务器端生成，发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器,对cookie知识感兴趣的朋友一起学习吧
    2016-06-06
  • 理解和运用JavaScript的闭包机制

    理解和运用JavaScript的闭包机制

    这篇文章主要介绍了理解和运用JavaScript的闭包机制,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2015-08-08
  • JavaScript 学习笔记之基础中的基础

    JavaScript 学习笔记之基础中的基础

    这篇文章主要介绍了JavaScript 学习笔记系列的第一篇文章，跟所有开篇一样，本文我们介绍的都是些基础中的基础知识，虽然都是基础，但建议大家不要略过此文
    2015-01-01

最新评论