JS中防抖和节流

简介: JS中防抖和节流

防抖和节流是什么:

防抖和节流是两种控制函数执行频率的技术,主要用于优化事件处理程序的性能。它们的主要区别在于执行时机和执行次数。

防抖(Debounce)是一种在一段时间内无论触发多少次事件,都只执行一次事件处理程序的技术。具体来说,如果在设定的时间段内,事件被重复触发,则会重新计算延迟时间。例如,电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖。

节流(Throttle)则是在一段时间内无论事件触发多么频繁,都只执行一次事件处理程序的技术。如果在设定的时间段内,事件被重复触发,则只会执行第一次触发的事件处理程序。例如,电梯第一个人进来后,15秒后准时运送一次,这是节流。

 

js防抖和节流实现的原理:

防抖和节流的实现主要依赖于定时器技术。防抖的原理是,当事件被触发后,设定一个延迟时间n秒,如果在这段时间内又被触发,则重新计算延迟时间。而节流的原理是,当事件被触发时,设定一个延迟时间n秒执行该事件,如果在这n秒内再次被触发,也不影响事件的执行。

这两种方法都是为了限制函数的执行频次,优化函数触发频率过高导致的响应速度跟不上触发频率的问题。它们可以防止在短时间内频繁触发同一事件而导致的延迟、假死或卡顿的现象。具体来说,防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。

如何实现:

防抖函数的实现:

 

function debounce(fn, delay) {
    let timer = null;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    }
}

在这段代码中,我们创建了一个延迟器timer,当事件被触发时清除已有的定时器并设定一个新的。如果在delay时间段内再次触发该事件,则会重新设定一个新的定时器。

节流函数的实现:

function throttle(fn, delay) {
    let previous = 0;
    return function() {
        const now = Date.now();
        const context = this;
        const args = arguments;
        if (now - previous > delay) {
            fn.apply(context, args);
            previous = now;
        }
    }
}

在这段代码中,我们设定了一个变量previous为上一次执行函数的时间,每次执行函数时都会比较当前时间与previous的差值是否大于设定的delay值。只有在大于delay值的情况下才会执行函数,从而达到控制函数执行频率的目的。

防抖和节流的应用场景:

防抖和节流的主要应用场景包括:

  • 防抖应用:当需要用户最后一次输入完才发送请求时,如搜索框的搜索输入、窗口大小调整resize等,都适合使用防抖技术。这样可以有效防止因为用户频繁输入导致的结果重复渲染。
  • 节流应用:对于一些需要在连续触发事件时,按照一定的时间间隔执行回调的场景,比如滚动加载、鼠标不断点击等,都可以通过节流来实现。这样可以控制函数的执行频率,避免因为事件处理程序执行过于频繁而导致的性能问题。
相关文章
|
9天前
|
JavaScript
JS封装节流函数
JS封装节流函数
23 0
|
9天前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
12 1
|
9天前
|
JavaScript 前端开发 UED
js的节流
js的节流
15 0
|
9天前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
20 0
|
9天前
|
JavaScript
|
9天前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
55 3
|
9天前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
41 0
|
9天前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
19 0
|
5天前
|
存储 JavaScript 前端开发
从零开始学习Vue.js
Vue.js 是一种流行的前端框架,它使用简单,灵活且易于上手。如果你是一个前端开发者,并想要学习 Vue.js,本文将为您提供一个从零开始的指南。我们将探讨 Vue.js 的基础知识和常用功能,以及如何构建一个简单的 Vue.js 应用程序。
|
6天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会