哈士奇最近在学习js的过程中看到了防抖与节流两个提升性能与用户体验的方法,它也是面试题中的常考知识点,那么如何深入了解防抖与节流呢?哈士奇在这里和大家一起分享哦!
防抖
在前端开发中,我们经常需要处理一些用户触发的事件,比如点击按钮、输入框输入等。然而,如果这些事件触发得过于频繁,可能会导致性能问题和不必要的资源浪费。JavaScript 防抖是一种优化技术,通过延迟执行函数,有效地减少函数调用的频率,提升性能和用户体验。
什么是防抖?
防抖是一种控制函数执行频率的技术。它的基本思想是当一个函数被触发后,不立即执行,而是等待一段时间,如果在这段时间内没有再次触发,那么函数就会被执行。如果在等待时间内再次触发,等待时间将被重新计算,函数的执行时机将被推迟。
防抖的应用场景
-
输入框输入事件: 在处理用户输入时,防抖可以确保只在用户停止输入一段时间后才进行处理,避免频繁的请求或操作。
-
按钮点击事件: 防抖可以用于按钮点击事件,确保用户点击按钮后只有在一定时间内的第一次点击生效,防止误操作。
-
滚动事件: 在处理页面滚动事件时,防抖可以减少触发频率,提高性能。
防抖的实现
让我们来看一段简单的 JavaScript 代码,实现了一个基础的防抖函数:
html
<body>
<input type="submit" id="btn">
</body>
javascript
let btn = document.getElementById('btn')//获取点击事件
function send(e){//定义函数确认提交完成
console.log('已提交',e)
}
btn.addEventListener('click',debounce(send,1000))//建立一个监听事件,点击btn后自动运行debounce
function debounce(fn,deplay){
let timer=null;//初始化计时器
return function(){
let args=arguments;// 对象是一个类数组对象,可以通过索引访问其中的参数。
if(timer){
clearTimeout(timer); //检测之前是否有点击过,如果点击过就不提交,重置timer值
}
timer=setTimeout(function(){//
fn.call(this,args)//使用call函数重定位this指针与传入参数
},deplay)
}
}
在这个例子中,debounce
函数接受一个函数 fn
和一个延迟时间 delay
,返回一个新的函数,这个新函数在被调用时会启动计时器,确保函数在一段时间内只执行一次。
注意!!!!!
在这里要给大家解释清楚为什么要使用call()方法进行传递this指针重定向和参数传递 如果在这里不加入call()方法进行参数传递的话,根据this指针的指向,我们可以知道fn(方法)指针指向的是全局变量,但是对于btn的监听事件debounce()指针应该指向btn才能接收btn的数值,包括传参也需要传递的是btn的参数。
优化防抖函数
有时候我们希望在第一次触发事件时立即执行函数,这可以通过添加一个参数来实现:
javascript
function debounce(fn, delay, immediate) {
let timer = null;
return function() {
let args = arguments;
if (immediate && !timer) {
fn.call(this, args);
}
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
fn.call(this, args);
}, delay);
};
}
通过设置 immediate
为 true
,可以在第一次触发时立即执行函数。
节流
在前端开发中,频繁触发的事件(如按钮点击、滚动、输入)可能导致性能问题和用户体验下降。JavaScript 节流是一种优化技术,通过控制函数执行的频率,降低触发次数,提升性能和用户交互体验。
什么是节流?
节流是一种控制函数执行频率的技术,确保函数在一定时间内只执行一次。它与防抖不同,防抖是在一定时间内只执行最后一次触发的函数,而节流是在一定时间内按照固定频率执行函数。
节流的应用场景
-
按钮点击事件: 节流可以用于按钮点击事件,确保用户点击按钮后只有在一定时间内的第一次点击生效,防止误操作。
-
输入框输入事件: 在处理用户输入时,节流可以确保只在一定时间间隔内执行一次处理函数,避免频繁的请求或操作。
-
滚动事件: 节流可以用于处理页面滚动事件,减少触发频率,提高性能。
节流的实现
以下是一个简单的 JavaScript 节流函数的实现:
html
<body>
<button id="btn">提交</button>
</body>
javascript
let btn = document.getElementById('btn')//获取事件名
function send(){//设定提交成功样式
console.log('提交完成');
}
btn.addEventListener('click',throttle(send,1000))//确定监听器
function throttle(fn,deplay){
let prevTime= Date.now();//确认点击时间
return function(){
if(Date.now()-prevTime>deplay){//当时间间隔大于所选时间时进行操作
fn.apply(this,...arguments)//重定位this与参数
prevTime= Date.now()//确定新的点击时间
}
}
}
在这个例子中,throttle
函数接受一个函数 fn
和一个延迟时间 delay
,返回一个新的函数,这个新函数会按照固定频率执行传入的函数。
优化节流函数
有时候我们可能希望在一开始就执行一次函数,可以通过添加一个参数来实现:
javascript
function throttle(fn, delay, immediate) {
let prevTime = Date.now();
return function() {
if (immediate && !prevTime) {
fn.apply(this, arguments);
}
if (Date.now() - prevTime > delay) {
fn.apply(this, arguments);
prevTime = Date.now();
}
};
}
通过设置 immediate
为 true
,可以在一开始就执行一次函数。
结语
JavaScript 防抖与节流是一种强大的性能优化技术,特别适用于处理频繁触发的事件。通过合理运用防抖与节流,我们可以降低函数执行的频率,减轻浏览器的负担,提升用户体验。在实际应用中,根据具体场景选择合适的防抖策略,将有助于提高代码的可维护性和性能。你学会了吗?