Vue中实现函数限流：节流和防抖

在前端开发中，我们经常会遇到需要对用户操作进行限流的场景，比如搜索框的输入提示、按钮的多次点击等。在Vue中，我们可以通过节流（Throttle）和防抖（Debounce）两种方式来实现函数限流。

节流（Throttle）

节流是指在一定时间内只允许函数执行一次。这在处理滚动事件、窗口调整大小等频繁触发的事件时非常有用。

防抖（Debounce）

防抖是指在事件触发后等待一定的延迟时间，如果在这段时间内事件又被触发，则重新计时。这在处理输入框实时搜索、按钮的多次点击等场景中非常有用。

在Vue中实现节流和防抖

下面是一个使用Vue 3和Lodash库实现节流和防抖的示例代码。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Function Throttling and Debouncing in Vue</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script> 
</head>
<body>
<div id="Application"><button @click="click">Click Me</button><button @click="click2">Click Me Too</button>
</div>
<script>const App = {data() {return {throttle: false}},methods: {click() {if (!this.throttle) {console.log(Date());} else {return;}this.throttle = true;setTimeout(() => {this.throttle = false;}, 2000);},click2: _.debounce(function () {console.log("Date:", Date());}, 2000)}}Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

代码解析

HTML部分：我们有两个按钮，分别绑定了click和click2方法。
Vue实例：
- data函数返回一个对象，包含一个throttle属性，用于控制节流。
- methods对象包含两个方法：
  - click方法：这是一个简单的节流实现。当按钮被点击时，如果throttle为false，则执行日志输出，并将throttle设置为true。2秒后，throttle被重置为false。
  - click2方法：使用Lodash的debounce函数实现防抖。当按钮被点击时，如果2秒内没有再次点击，将执行日志输出。