1. 在Vue中，节流（throttling）是一种限制函数触发频率的技术。它可以防止在短时间内频繁触发事件处理函数。通过使用节流，可以控制事件回调函数的执行间隔，从而减少不必要的函数调用，提高性能和用户体验。
- 具体而言，节流会延迟函数的执行，并在指定的时间间隔内只执行一次。如果在这个时间间隔内再次触发事件，函数的执行将被忽略。只有当时间间隔过去后，才会再次执行函数。
- 在Vue中实现节流通常需要借助第三方库或自定义指令。常见的方式是使用Lodash等工具库的
throttle函数，或者自己编写一个自定义指令来实现节流功能。这样可以将节流逻辑应用到需要控制触发频率的事件处理上，例如获取验证码一分钟内只能触发一次点击事件！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>获取验证码</button>
<script>
// if(throttled===false)
let count = 60
let throttled = false;
document.querySelector('button').addEventListener('click',()=>{
if (!throttled) {
throttled = true;
let intervalId = setInterval(() => {
count--;
document.querySelector('button').innerHTML = ` ${count}秒后重新获取`;
if (count === 0) {
clearInterval(intervalId);
throttled = false;
}
}, 1000);
}
})
</script>
</body>
</html>
这段代码实现了一个按钮点击的节流效果。具体原理如下：
- 创建一个变量
count并初始化为 60，表示倒计时的初始值。 - 创建一个布尔变量
throttled并初始化为 false，表示当前是否处于节流状态。 - 给文档中选择器匹配的第一个按钮添加一个点击事件监听器。
- 在点击事件处理函数中，通过判断
throttled的值来确定是否执行节流操作。 - 如果
throttled为 false，则将其设置为 true，表示进入节流状态。 - 创建一个定时器，每隔 1000 毫秒（1 秒）执行一次回调函数。
- 在回调函数内部，将
count减一，并更新按钮的文本内容显示剩余时间。 - 如果
count等于 0，则清除定时器并将throttled设置为 false，表示结束节流状态。 - 这样，在按钮点击后的 60 秒内，按钮会显示剩余时间，并且按钮点击事件不会触发多次，直到倒计时结束恢复初始状态。
总结：该代码使用节流机制控制按钮点击事件的触发频率，避免在短时间内多次触发事件
