执笔看墨花开💜千千 执笔看墨花开💜千千
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)

执笔看墨花开

顺其自然
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)
  • JS文章

    • 识海
    • ES5面向对象
    • ES6面向对象
    • 多种数组去重性能对比
    • JS随机打乱数组
    • 判断是否为移动端浏览器
    • 将一维数组按指定长度转为二维数组
    • 防抖与节流函数
      • 防抖函数
        • 封装
      • 节流函数
        • 封装
      • 应用场景
        • 防抖应用场景
        • 节流的应用场景
      • 示例
    • JS获取和修改url参数
    • 比typeof运算符更准确的类型判断
    • Commonjs,AMD,CMD和UMD的差异
    • 时间切片
    • 三级目录

  • Vue文章

  • 跨端开发

  • React文章

  • 杂文

  • CSS

  • 前端
  • JS文章
xlzy520
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 xugaoyi (@xugaoyi) on CodePen.

编辑 (opens new window)
上次更新: 2021/06/08, 00:42:57
将一维数组按指定长度转为二维数组
JS获取和修改url参数

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

最近更新
01
Vue2
08-26
02
JS编程题
08-26
03
前言
08-26
更多文章>
Theme by Vdoing

© 2021-2021 执笔看墨花开

粤ICP备2021110554号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×