什么是函数的防抖、节流,并手写基本代码
时间: 2023-05-22 19:06:51 浏览: 96
函数的防抖和节流都是用来控制函数被频繁调用的技术,以优化程序性能的。
防抖是指在函数需要被连续调用时,只执行最后一次调用,且在指定时间内未再次触发调用时,才会真正执行函数。例如在用户输入搜索关键词时,输入框会触发搜索函数进行查询,防抖可以防止用户快速输入时频繁调用搜索函数。常见的实现方式是使用定时器来延迟执行函数。
实现防抖的基本代码如下:
function debounce(func, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(context, args);
}, delay);
}
}
节流是指限制函数的最小执行时间间隔,使函数在该时间段内最多执行一次,以防止函数被频繁调用。例如在页面滚动时,监听滚动事件的代码可能会被频繁触发,导致页面卡顿,节流就可以限制滚动事件的触发频率,优化页面性能。常见的实现方式是使用时间戳或定时器来判断执行时间间隔。
实现节流的基本代码如下:
function throttle(func, delay) {
let timer = null;
let lastTime = 0;
return function() {
const context = this;
const args = arguments;
const nowTime = Date.now();
if (nowTime - lastTime > delay) {
func.apply(context, args);
lastTime = nowTime;
}
}
}
阅读全文