### 彪哥

爱好前端

- JavaScript文章

  - 33个非常实用的JavaScript一行代码
  - new命令原理
  - ES5面向对象
  - ES6面向对象
  - 多种数组去重性能对比
  - JS随机打乱数组
  - 判断是否为移动端浏览器
  - 将一维数组按指定长度转为二维数组
  - 防抖与节流函数
    - 防抖函数
      - 封装
    - 节流函数
      - 封装
    - 应用场景
      - 防抖应用场景
      - 节流的应用场景
    - 示例
  - JS获取和修改url参数
  - 比typeof运算符更准确的类型判断

  - 三级目录

- 学习笔记

- 前端
- JavaScript文章

heBody
2020-02-29
目录

# 防抖与节流函数

# # 防抖与节流函数

防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。

区别在于，防抖函数只会在高频事件结束后n毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔n毫秒调用一次函数。

## # 防抖函数

触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。

### # 封装

    // 防抖函数
    function debounce(func, wait) {
        let timeout = null;
        return function () {
            let context = this;
            let args = arguments;
            if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
                func.apply(context, args)
            }, wait);
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12

## # 节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

### # 封装

    // 节流函数
    function throttle(func, wait) {
        let timeout = null;
        return function () {
            let context = this;
            let args = arguments;
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

## # 应用场景

常见的应用场景都是使用高频事件来调用函数的过程当中，比如应用于window对象的resize、scroll事件，拖拽时的mousemove事件，文字输入、自动完成的keyup事件。

### # 防抖应用场景

- scroll事件滚动触发事件
- 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
- 表单验证
- 按钮提交事件。
- 浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。

### # 节流的应用场景

- DOM 元素的拖拽功能实现（mousemove）
- 搜索联想（keyup）
- 计算鼠标移动的距离（mousemove）
- Canvas 模拟画板功能（mousemove）
- 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
- 监听滚动事件判断是否到页面底部自动加载更多

## # 示例

See the Pen 防抖与节流函数 by heBody (@heBody) on CodePen.

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
将一维数组按指定长度转为二维数组
JS获取和修改url参数

← 将一维数组按指定长度转为二维数组 JS获取和修改url参数→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式