vue 写一个终止正在执行的方法的代码
时间: 2024-01-26 17:03:36 浏览: 30
在 Vue 中,可以使用 `watch` 监听一个变量或表达式,一旦变量或表达式的值发生变化,就会执行对应的函数。所以,如果要终止一个正在执行的方法,可以将其封装成一个变量或表达式,并在 `watch` 函数中监听这个变量或表达式,一旦需要终止方法的时候,修改这个变量或表达式的值即可。
以下是示例代码:
```vue
<template>
<div>
<button @click="start">开始执行</button>
<button @click="stop">终止执行</button>
</div>
</template>
<script>
export default {
data() {
return {
running: false, // 记录方法是否在执行
stopRunning: false // 用于终止方法的变量
}
},
methods: {
async longRunningMethod() {
// 长时间执行的方法
console.log('开始执行')
while (!this.stopRunning) {
await new Promise(resolve => setTimeout(resolve, 1000))
console.log('执行中')
}
console.log('执行完毕')
this.running = false
},
start() {
if (this.running) {
console.log('方法正在执行')
return
}
this.running = true
this.stopRunning = false
this.longRunningMethod()
},
stop() {
if (!this.running) {
console.log('方法未在执行')
return
}
console.log('终止执行')
this.stopRunning = true
}
},
watch: {
stopRunning(value) {
if (value) {
console.log('正在终止执行')
}
}
}
}
</script>
```
在上面的代码中,`longRunningMethod` 是一个长时间执行的方法,通过 `while` 循环来模拟长时间执行的过程。在 `start` 方法中,首先判断方法是否正在执行,如果正在执行则不做任何操作,否则将 `running` 设为 `true`,`stopRunning` 设为 `false`,然后执行 `longRunningMethod` 方法。在 `stop` 方法中,首先判断方法是否正在执行,如果未在执行则不做任何操作,否则将 `stopRunning` 设为 `true`,从而终止 `longRunningMethod` 方法的执行。在 `watch` 函数中,监听 `stopRunning` 变量的变化,如果变为 `true`,则表示需要终止 `longRunningMethod` 方法的执行。