前端_网页编程节流

一时失言乱红尘 2022-12-02 10:53 141阅读 0赞

### 文章目录 ###

*  前言
 *  1、什么是节流
 *  2、节流的应用场景
 *  3 节流案例 - 鼠标跟随效果
 *   *  3.1 渲染UI结构并美化样式
     *  3.2 不使用节流实现鼠标跟随效果
     *  3.3 节流阀的概念
     *  3.4 使用节流阀实现鼠标跟随效果
 *  附：完整代码
 *  总结

# 前言 #

我们在做页面事件绑定的时候，经常要进行节流处理，比如鼠标异步点击，去执行一个异步请求时，需要让它在上一次没执行时不能再点击，又或者绑定滚动事件，这种持续触发进行DOM判断的时候，就要按一定频率的执行。

本文是关于js防抖和节流的相关内容，记录下来供学习和查阅

--------------------

# 1、什么是节流 #

**节流策略**（throttle），顾名思义，可以减少一段时间内事件的触发频率。

通俗地讲，就是规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。  
![在这里插入图片描述][2020083015271667.png_pic_left]  
　　　　 节流原理图

# 2、节流的应用场景 #

*  鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
 *  懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；；
 *  监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

# 3 节流案例 - 鼠标跟随效果 #

## 3.1 渲染UI结构并美化样式 ##

图片素材：![在这里插入图片描述][20200830154806928.gif_pic_left]  
将图片素材和html文件放到同一个文件夹下（如果不是，请修改img的src属性）。

HTML结构和CSS样式：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>鼠标跟随效果</title>
        <style> html, body { margin: 0; padding: 0; overflow: hidden; } #angel { position: absolute; } </style>
    </head>
    
    <body>
        <img src="./angel.gif" alt="" id="angel">
    </body>
    
    </html>

## 3.2 不使用节流实现鼠标跟随效果 ##

代码如下：

## 3.3 节流阀的概念 ##

**生活中的节流阀：**

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

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

## 3.4 使用节流阀实现鼠标跟随效果 ##

**实现思路：**

1.  定义`timer`节流阀；
2.  定义延时器，把延时器的 id 赋值给`timer`（每次执行完毕将timer清空为`null`）；
3.  每次执行mousemove时，先判断timer是否为空，如果不为空直接return出去，不再执行后续的操作。

**实现代码：**

# 附：完整代码 #

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>鼠标跟随效果</title>
        <script src="./lib/jquery.js"></script>
        <style> html, body { margin: 0; padding: 0; overflow: hidden; } #angel { position: absolute; } </style>
    </head>
    
    <body>
        <img src="./images/angel.gif" alt="" id="angel">
        <script> $(function() { // 1、获取图片元素 var angel = $('#angel') // 定义节流阀 var timer = null; // 2、监听文档的 mousemove 事件 $(document).on('mousemove', function(e) { // 判断节流阀是否为空，如果为空，表示距离上次执行不足16秒，直接return出去 if (timer) { return } timer = setTimeout(function() { // 3、給图片设置位置 $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px') // 每次执行完清空延时器 timer = null; }, 16) }) }) </script>
    </body>
    
    </html>

完整案例源码 / 素材文件：[https://pan.baidu.com/s/1\_rGjiuwQTPhGK2njbo9vsw  
][https_pan.baidu.com_s_1_rGjiuwQTPhGK2njbo9vsw] 提取码：mxwt

--------------------

# 总结 #

**防抖和节流的区别：**

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

[2020083015271667.png_pic_left]: /images/20221123/a9c213db3ba04de698de37db1d7ccb4f.png
[20200830154806928.gif_pic_left]: /images/20221123/f950928fdf47440fa5610c32e3580ec3.png
[https_pan.baidu.com_s_1_rGjiuwQTPhGK2njbo9vsw]: https://pan.baidu.com/s/1_rGjiuwQTPhGK2njbo9vsw