当前位置: 首页 > news >正文

节流 和 防抖的使用

节流(Throttle)是一种常用的性能优化技术,用于限制函数的执行频率,确保在一定时间内只执行一次。它常用于处理浏览器事件(如滚动、窗口调整大小、鼠标移动等),以避免因事件触发过于频繁而导致的性能问题。

以下是手写节流函数的实现方法,以及一些常见的使用场景和注意事项。

节流函数的实现

节流函数的核心思想是:在指定的时间间隔内,只允许函数执行一次。以下是两种常见的节流实现方式

1. 时间戳版本(基于时间间隔)
function throttle(func, limit) {let lastFunc;let lastRan;return function () {const context = this;const args = arguments;if (!lastRan) {func.apply(context, args);lastRan = Date.now();} else {clearTimeout(lastFunc);lastFunc = setTimeout(function () {if (Date.now() - lastRan >= limit) {func.apply(context, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
}
2. 定时器版本(基于固定时间间隔)
function throttle(func, limit) {let inThrottle;return function () {const args = arguments;const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => (inThrottle = false), limit);}};
}

使用示例

1. 滚动事件
window.addEventListener('scroll', throttle(function () {console.log('Scrolling...');
}, 100));
2. 窗口调整大小
window.addEventListener('resize', throttle(function () {console.log('Resizing...');
}, 200));

注意事项

  1. 参数传递

    • 节流函数需要正确处理原函数的上下文(this)和参数(arguments),确保它们能够正确传递。
  2. 性能优化

    • 节流函数本身也会影响性能,因此需要合理设置时间间隔。
  3. 销毁定时器

    • 如果使用了定时器版本,记得在组件销毁时清除定时器,避免内存泄漏。

完整代码示例

以下是一个完整的节流函数实现,结合了时间戳和定时器的优点:

function throttle(func, limit) {let inThrottle;let lastRan;return function () {const args = arguments;const context = this;if (!lastRan) {func.apply(context, args);lastRan = Date.now();} else {clearTimeout(inThrottle);inThrottle = setTimeout(function () {if (Date.now() - lastRan >= limit) {func.apply(context, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
}// 使用示例
window.addEventListener('scroll', throttle(function () {console.log('Scrolling...');
}, 100));

防抖(Debounce)是一种常用的性能优化技术,用于限制函数的执行频率。与节流(Throttle)不同,防抖的核心思想是:在指定的时间间隔内,只有最后一次触发事件时才执行函数。如果在时间间隔内再次触发事件,则重新计时。

防抖常用于以下场景:

  1. 输入框的搜索建议:避免用户输入时频繁触发搜索请求。
  2. 按钮点击:防止用户快速多次点击导致多次提交。
  3. 窗口调整大小:避免频繁触发布局调整。

以下是防抖函数的实现方法以及具体案例。


防抖函数的实现

防抖函数的实现相对简单,核心是利用 setTimeoutclearTimeout 来控制函数的执行。

基本实现
function debounce(func, delay) {let timeoutId;return function (...args) {const context = this;clearTimeout(timeoutId); // 清除之前的定时器timeoutId = setTimeout(() => {func.apply(context, args); // 延迟后执行函数}, delay);};
}
实现思路
  1. 每次触发事件时,清除之前的定时器。
  2. 设置一个新的定时器,延迟指定时间后执行目标函数。
  3. 如果在延迟时间内再次触发事件,则重新计时。

具体案例:输入框搜索建议

假设我们有一个输入框,用户输入时需要触发搜索建议。为了避免频繁触发搜索请求,可以使用防抖技术。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Debounce Example</title>
</head>
<body><input type="text" id="search-input" placeholder="Search..."><div id="suggestions"></div><script>// 防抖函数function debounce(func, delay) {let timeoutId;return function (...args) {const context = this;clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(context, args);}, delay);};}// 搜索建议函数function searchSuggestions(query) {console.log(`Searching for: ${query}`);const suggestions = document.getElementById('suggestions');suggestions.innerHTML = `<p>Showing suggestions for: ${query}</p>`;}// 获取输入框const input = document.getElementById('search-input');// 使用防抖绑定输入事件input.addEventListener('input', debounce((event) => {searchSuggestions(event.target.value);}, 500)); // 延迟 500 毫秒</script>
</body>
</html>

防抖的高级用法

1. 立即执行与延迟执行

防抖函数可以配置是否在第一次触发时立即执行,而不是延迟执行。以下是改进版的防抖函数:

function debounce(func, delay, immediate = false) {let timeoutId;return function (...args) {const context = this;const callNow = immediate && !timeoutId; // 是否立即执行clearTimeout(timeoutId);timeoutId = setTimeout(() => {if (!immediate) {func.apply(context, args); // 延迟执行}timeoutId = null;}, delay);if (callNow) {func.apply(context, args); // 立即执行}};
}
使用示例
// 延迟执行
input.addEventListener('input', debounce((event) => {searchSuggestions(event.target.value);
}, 500));// 立即执行
input.addEventListener('input', debounce((event) => {searchSuggestions(event.target.value);
}, 500, true));

与防抖的区别

节流和防抖都是用于限制函数执行频率的技术,但它们的实现和用途有所不同:

  • 节流(Throttle)

    • 在指定的时间间隔内,确保函数只执行一次。
    • 适用于需要定期触发的场景(如滚动、窗口调整大小)。
  • 防抖(Debounce)

    • 在指定的时间间隔内,只有最后一次触发时才执行函数。
    • 适用于需要延迟执行的场景(如输入框的搜索建议、按钮点击)

在 Vue 中使用:

<template><input type="text" v-model="inputValue" @input="debouncedInput" />
</template>export default {data() {return {inputValue: ""};},methods: {handleInput() {console.log("Debounced input:", this.inputValue);}},mounted() {this.debouncedInput = debounce(this.handleInput, 500);}
};

2. 使用 Lodash 的 debounce throttle

Lodash 是一个常用的 JavaScript 工具库,提供了现成的防抖函数

安装 Lodash:
npm install lodash
使用 debounce:
import { debounce } from "lodash";export default {data() {return {inputValue: ""};},methods: {handleInput() {console.log("Debounced input:", this.inputValue);}},mounted() {this.debouncedInput = debounce(this.handleInput, 500);}
};

模板绑定:

<input type="text" v-model="inputValue" @input="debouncedInput" />
使用 throttle:
<template><div><h1>Lodash 节流示例</h1><p>滚动页面查看节流效果</p></div>
</template><script>
import { throttle } from 'lodash';export default {name: 'LodashThrottleExample'methods: {handleScroll() {console.log('滚动事件触发');// 在这里添加你的滚动逻辑}},mounted() {// 使用 Lodash 的 throttle 函数this.throttledScroll = throttle(this.handleScroll, 200);window.addEventListener('scroll', this.throttledScroll);},beforeDestroy() {window.removeEventListener('scroll', this.throttledScroll);}
};
</script>
<template><div><h1>Lodash 节流示例</h1><p>滚动页面查看节流效果</p></div>
</template><script setup>
import { onMounted, onUnmounted } from 'vue';
import { throttle } from 'lodash';const handleScroll = () => {console.log('滚动事件触发');// 在这里添加你的滚动逻辑
};const throttledScroll = throttle(handleScroll, 200);onMounted(() => {window.addEventListener('scroll', throttledScroll);
});onUnmounted(() => {window.removeEventListener('scroll', throttledScroll);
});
</script>

3. 使用 Vue 组合式 API 封装防抖

Vue 3 的组合式 API 提供了更灵活的方式封装防抖逻辑。

封装 useDebounce
import { ref } from "vue";export function useDebounce(cb, delay = 100) {const timer = ref(null);const handler = function (...args) {clearTimeout(timer.value);timer.value = setTimeout(() => {cb(...args);}, delay);};const cancel = () => {clearTimeout(timer.value);timer.value = null;};return { handler, cancel };
}
使用:
import { useDebounce } from "./useDebounce";export default {setup() {const { handler: debouncedInput } = useDebounce(() => {console.log("Debounced input");}, 500);return { debouncedInput };}
};

模板绑定:

<input type="text" @input="debouncedInput" />

4. 使用 Vue 指令封装防抖

将防抖逻辑封装为 Vue 自定义指令,方便在多个地方复用。

定义指令:
export default {inserted(el, binding) {const delay = binding.arg || 500;let timer;el.addEventListener("input", (e) => {clearTimeout(timer);timer = setTimeout(() => {binding.value(e);}, delay);});}
};
使用:
<input type="text" v-debounce:500="handleInput" />

5. 使用 VueUse 的 useDebounce

VueUse 是一个基于 Vue 3 的实用工具库,提供了 useDebounce 函数。

安装 VueUse:
npm install @vueuse/core
使用:
import { useDebounce } from "@vueuse/core";export default {setup() {const inputValue = ref("");const debouncedValue = useDebounce(inputValue, 500);return { inputValue, debouncedValue };}
};

模板绑定:

<input type="text" v-model="inputValue" />
<div>Debounced Value: {{ debouncedValue }}</div>

总结

  • 如果项目中已经使用了 Lodash,可以直接使用 _.debounce
  • 如果需要更灵活的封装,可以使用 Vue 的组合式 API 或自定义指令。
  • 对于 Vue 3 项目,推荐使用 VueUseuseDebounce,它提供了简洁的 API 和良好的性能。

相关文章:

  • 【C语言练习】018. 定义和初始化结构体
  • ai之paddleOCR 识别PDF python312和paddle版本冲突 GLIBCXX_3.4.30
  • 提升办公效率的PDF转图片实用工具
  • 学习黑客资产威胁分析贴
  • 《MATLAB实战训练营:从入门到工业级应用》趣味入门篇-用声音合成玩音乐:MATLAB电子琴制作(超级趣味实践版)
  • NocoDB:开源的 Airtable 替代方案
  • 二叉树最近公共祖先(后序遍历,回溯算法)
  • springboot war包tomcat中运行报错,启动过滤器异常,一个或多个筛选器启动失败。
  • 关于Python:7. Python数据库操作
  • 经典算法 求解硬币组成问题
  • 基于大模型的肾结石诊疗全流程风险预测与方案制定研究报告
  • 软件测评如何保障质量与提升体验?从五方面详细说说
  • JSON 处理笔记
  • 接上篇,解决FramePack启动报错:“httpx.ReadError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。“的问题
  • 在c++中,char定义的变量取地址时,为什么会输出 “烫烫烫...“?
  • 【在Spring Boot中集成Redis】
  • LeetCode - 1137.第N个泰波那契数
  • 学习黑客色即是空
  • python使用cv2在图片上标点
  • 二、shell脚本--变量与数据类型
  • 首次带人形机器人走科技节红毯,傅利叶顾捷:机器人行业没包袱,很多事都能从零开始
  • 高途一季度净利润同比增长1108%: “与吴彦祖一起学英语”短时间内就实现了盈利
  • 终于,俄罗斯和乌克兰谈上了
  • 会谈时间迟迟未定、核心议题存在分歧,俄乌“土耳其谈判”一波三折
  • 韧性十足的中国外贸企业:“不倒翁”被摁下去,还会再弹起来
  • 公元1058年:柳永词为什么时好时坏?