如何在5秒內停止功能？ Vue.js

Question

這是我的代碼

 setInterval(this.randomImage, 250);
 setInterval(this.randomPosition, 250);
 setInterval(this.addImage, 250);

我想在5秒鍾內停止addImage功能，因為圖像無限增加！

我試圖通過這種方式做到這一點

let timesRun = 0;
const intervalAddImage = setInterval(function () {
  timesRun += 1;
  if (timesRun === 60) {
    clearInterval(intervalAddImage)
  }
  this.addImage();

}, 250);

intervalAddImage();

但這行不通...

我正在使用Vue.js！

Answer 1

以下代碼每250毫秒運行一次任務，並在5秒后停止。 我希望這會給您一些啟發。

 var intervalId = setInterval(() => console.log("running"), 250); setTimeout(() => clearInterval(intervalId), 5000); 

Answer 2

這是您的錯誤：請勿不加小心地使用this ：您應該花一些時間來了解this在JavaScript中的工作方式 。

在您的代碼中，您增加了this.timesRun ，但是您對timesRun進行了測試，但從未增加。

該示例將按您期望的方式工作：

 let timesRun = 0; //const addImage = this.addImage; const intervalAddImage = setInterval(function () { timesRun += 1; if (timesRun === 60) { clearInterval(intervalAddImage); } //addImage(); console.log("Hello", timesRun); }, 250); 

Answer 3

這樣就可以了）

let timesRun = 0; // just change to this
function addImage(timesRun) { console.log(timesRun)}
const intervalAddImage = setInterval(function () {
    timesRun += 1; // just change to this
    if (timesRun === 4) {
        clearInterval(intervalAddImage)
        return; // add this
    }
    addImage(timesRun);
}, 250);