VUE前端实现防抖节省 Lodash

方法一：采用Lodash工具库

Lodash 是一个同等性、模块化、高性能的 JavaScript 实用工具库。
（1）采用终端导入Lodash库

1. $ npm i -g npm
2. $ npm i --save lodash

复制代码

（2）应用

示例：搜刮框输入防抖

在这个示例中，我们盼望用户在输入框中停止输入 500 毫秒后才执行搜刮操作，克制频繁请求.

1. <input type="text" id="search" placeholder="Search...">
3. <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
4. <script>
5.   // 假设这是一个执行搜索操作的函数
6.   function performSearch(query) {
7.     console.log('Searching for:', query);
8.     // 这里可以发送 ajax 请求进行搜索
9.   }
11.   // 使用 lodash 的 debounce 函数
12.   const debouncedSearch = _.debounce(function(event) {
13.     performSearch(event.target.value);
14.   }, 500);  // 500ms 的防抖时间
16.   // 监听输入框的输入事件
17.   document.getElementById('search').addEventListener('input', debouncedSearch);
18. </script>

复制代码

示例：滚动事故节省

在这个示例中，我们盼望当用户滚动页面时，每隔 1 秒才记录一次滚动事故，克制频繁触发回调函数。

1. <div style="height: 2000px;">Scroll down to see the effect</div>
2. <!-- 导入 throttle 函数-->
3. <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
4. <script>
5.     // 这是一个处理滚动事件的函数
6.     function handleScroll() {
7.         console.log('Scroll event detected at:', new Date().toLocaleTimeString());
8.     }
10.     // 使用 lodash 的 throttle 函数，每隔 1 秒最多触发一次
11.     const throttledScroll = _.throttle(handleScroll, 1000);
13.     // 监听滚动事件
14.     window.addEventListener('scroll', throttledScroll);
15. </script>

复制代码

• 解释：
  

• 
  
  
  
  • 当用户滚动页面时，throttledScroll 函数会在 1 秒内最多触发一次，克制滚动时回调函数被频繁调用。
    
  • 这优化了页面滚动的性能，特别是在回调函数较为复杂时。
    
  
  

示例：结合 leading 和 trailing 选项

假设我们盼望在用户第一次触发事故时立刻执行函数，并在停止触发 1 秒后再次执行。

1. <input type="text" id="input-field" placeholder="Type something...">
3. <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
4. <script>
5.     // 假设这是一个处理输入的函数
6.     function handleInput(value) {
7.         console.log('Input value processed:', value);
8.     }
10.     // 使用 debounce 函数，并配置 leading 和 trailing 选项
11.     const debouncedInput = _.debounce(function(event) {
12.         handleInput(event.target.value);
13.     }, 1000, { leading: true, trailing: true });
15.     // 监听输入框的输入事件
16.     document.getElementById('input-field').addEventListener('input', debouncedInput);
17. </script>

复制代码

方法二：自定义防抖、节省函数

（1）在utils文件夹下创建lodash.ts文件，里面定义防抖节省函数

2. // 防抖函数
3. export function debounce(fn: Function, delay: number) {
4.   let timer: ReturnType<typeof setTimeout> | null = null;
6.   return function (this: any, ...args: any[]) {
7.     // 清除上一个定时器
8.     if (timer) {
9.       clearTimeout(timer);
10.     }
12.     // 设置新的定时器
13.     timer = setTimeout(() => {
14.       fn.apply(this, args); // 使用apply确保this和参数正确传递
15.     }, delay);
16.   };
17. }
19.   
20. // 节流函数
21. export function throttle(fn: Function, delay: number) {
22.   let lastTime = 0;
24.   return function (this: any, ...args: any[]) {
25.     const now = Date.now();
27.     // 如果距离上次执行时间已超过指定时间间隔，则执行函数
28.     if (now - lastTime >= delay) {
29.       lastTime = now;  // 更新上次执行时间
30.       fn.apply(this, args);
31.     }
32.   };
33. }

复制代码

（2）应用

防抖

• 方式一：
  

1. <template>
2.   <div>
3.     <input v-model="searchText" placeholder="输入搜索内容" />
4.     <button @click="handleSubmit">提交</button>
5.   </div>
6. </template>
8. <script lang="ts" setup>
9. import { ref } from 'vue';
10. import { debounce } from '@/utils/debounce';  // 引入自己写的防抖函数
12. // 1. 声明响应式数据
13. const searchText = ref<string>('');
15. // 2. 防抖函数，延迟1000毫秒执行提交操作
16. const submitForm = (val: string) => {
17.   console.log('提交的搜索值:', val);
18.   // 在这里执行提交操作
19. };
21. // 3. 使用防抖函数包装提交操作
22. const handleSubmit = debounce(() => {
23.   submitForm(searchText.value);  // 使用当前输入的值执行提交操作
24. }, 1000); // 防抖延迟设置为1000毫秒
26. </script>

复制代码

• 方式二：
  

1. <template>
2.   <div>
3.     <input v-model="searchText" placeholder="输入搜索内容" />
4.     <button @click="submitForm(searchText)">提交</button>
5.   </div>
6. </template>
8. <script lang="ts" setup>
9. import { ref } from 'vue';
10. import { debounce } from '@/utils/debounce';  // 引入自己写的防抖函数
12. // 1. 声明响应式数据
13. const searchText = ref<string>('');
15. // 2. 定义提交表单操作
16. const submitForm = debounce((val: string) => {
17.   console.log('提交的搜索值:', val);
18.   // 在这里执行提交操作
19. }, 1000);  // 防抖延迟设置为1000毫秒
21. </script>

复制代码

节省

1. <template>
2.   <div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;">
3.     <!-- 模拟内容，超出容器高度以启用滚动 -->
4.     <div style="height: 1000px;">滚动内容</div>
5.   </div>
6. </template>
8. <script lang="ts" setup>
9. import { throttle } from './debounce';  // 引入节流函数
11. // 1. 定义滚动事件处理函数（节流）
12. const handleScroll = throttle(() => {
13.   console.log('滚动事件触发');
14.   // 在这里处理滚动事件，例如加载更多内容
15. }, 200);  // 每200毫秒只执行一次
17. </script>

复制代码

1. <template>
2.   <div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;">
3.     <!-- 模拟内容，超出容器高度以启用滚动 -->
4.     <div style="height: 1000px;">滚动内容</div>
5.   </div>
6. </template>
8. <script lang="ts" setup>
9. import { throttle } from './debounce';  // 引入节流函数
11. // 1. 定义滚动事件处理函数（节流）
12. const handleScroll = throttle(() => {
13.   console.log('滚动事件触发');
14.   // 在这里处理滚动事件，例如加载更多内容
15. }, 200);  // 每200毫秒只执行一次
17. </script>

复制代码

应用场景

防抖 (debounce):

手抖了。。。多点了好频频，一定时间内只执行一次。（年龄大了手抖）

• 功能：只有在用户停止触发事故一段时间后，才会执行回调函数。
  
• 应用场景：输入框搜刮、窗口大小调整（resize）、表单提交等。
  

节省 (throttle):

好比点了两次下拉革新列表页面，他不会马上直接执行两次，是在你定义的一定时间间隔前提前，先执行第一次在执行第二次

• 功能：在指定的时间间隔内，只执行一次函数。如果触发频繁，函数执行会被限制在每个时间间隔内最多执行一次。
  
• 应用场景：滚动事故、鼠标移动事故、resize 事故等。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。