js-防抖与节流函数

简介: 防抖与节流函数

防抖与节流函数

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

区别在于,防抖函数只会在高频事件结束后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);
    }
}

节流函数

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

封装

// 节流函数
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)
        }
    }
}

应用场景

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

防抖应用场景

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

节流的应用场景

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

示例

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

相关文章
|
3天前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
7 1
|
22小时前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
9 3
|
22小时前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
12 7
|
1天前
JS-函数封装数组求和案例
JS-函数封装数组求和案例
|
1天前
|
JavaScript 前端开发 容器
JavaScript 函数
JavaScript 函数
|
2天前
|
JavaScript 前端开发
Node.js 函数
Node.js 函数
11 4
|
16天前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
1月前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
26 0
|
1月前
|
JavaScript 前端开发 UED
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
|
1月前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
16 1