Vue超实用案例1：使用setTimeout实现延迟执行代码
<template>
<div>
<button @click="delayedAction">点击后延迟执行动作</button>
</div>
</template>
<script>
export default {
methods: {
delayedAction() {
// 清除之前的延迟执行的动作
clearTimeout(this.delayTimeout);
// 设置新的延迟执行的动作
this.delayTimeout = setTimeout(() => {
// 这里放置需要延迟执行的代码
alert('动作已执行，但是延迟了1000毫秒');
}, 1000);
}
}
}
</script>这段代码展示了如何在Vue组件中使用setTimeout来实现点击按钮后延迟执行某个动作的功能。它使用了Vue的方法delayedAction，在该方法中，它清除了之前可能设置的任何setTimeout，并设置了一个新的延迟1000毫秒执行的动作。这样可以避免多次点击时设置多个延迟执行的动作，保证只执行最后一次点击的动作。
评论已关闭