防抖
function debounce(fn, delay) {
let timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.call(this, ...args);
// 或者写成fn.apply(this, args);
}, delay);
};
}
function handleResize() {
console.log(111);
}
const debounceResize = debounce(handleResize, 300);
window.addEventListener("resize", debounceResize);
节流
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
let nowTime = new Date().getTime();
if (nowTime - lastTime >= delay) {
fn.call(this, ...args);
// fn.apply(this, args);
lastTime = nowTime;
}
};
}
function handleClick() {
console.log(111);
}
const throttleClick = throttle(handleClick, 2000);
setInterval(throttleClick, 100);
在实际的开发过程中，一般会使用lodash自有的debounce函数和throttle函数对所要防抖/节流的函数进行包裹。例如文章来源地址https://www.toymoban.com/news/detail-688832.html
const handleClick = useCallback(
throttle(()=>{
console.log(111);
}, delay)
,[])
文章来源：https://www.toymoban.com/news/detail-688832.html
到了这里，关于前端刷题-防抖节流的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
