VueJS setTimeout is not setting the time out

Question

I'am trying to play sounds respectively using setTimeout. I have an array called challenge which has (for test purposes) [0,1,2,3] and also a function which is play(n, true) for starting the sound and play(n, false) for stopping the sound. What I'am trying to do is:

play(0, true).wait1seconds.play(0,false).wait1seconds
play(1, true).wait1seconds.play(1,false).wait1seconds and so long.

What I have written so far is:

watch: {
    turn: function(turn) {
        if (this.turn === 0) {
            var self = this;
            var time = 500;
            var timeArray = [[],[]]; // I tried with and without this array
            for (var i = 0; i < this.challenge.length; i ++) {
                timeArray[0][i] = setTimeout(function() {
                    self.play(i, true);
                }, time);
                timeArray[1][i] = setTimeout(function() {
                    self.play(i, false);
                    this.time += 1500; //  // I tried with and without this
                }, time + 1000);
            }
        }
    }
}

Without the array, I just play everything at once and occasionally making a sound which I am able to detect. With the array it's just object error.

Freeman Lambda · Accepted Answer · 2017-06-19 15:16:50Z

2

Why are you even creating an array if you do not need to reference the timeouts later? You can just "manually" space-out timers by 1 second

// mocking code:
var challenge = [0, 1, 2, 3];

for (let i = 0; i < 2 * challenge.length; i++) {
  setTimeout(function() {
    play(Math.floor(i / 2), i % 2 === 0);
  }, 1000 * i);
}

function play(audioIndex, playAction) {
  if (playAction) {
    console.log("playing audio: " + audioIndex);
  } else {
    console.log("stopping audio: " + audioIndex);
  }
}

answered Jun 19, 2017 at 15:16

Freeman Lambda

3,6751 gold badge27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yanek Yuk Over a year ago

Thanks a lot. After changing var to let (which I don't understand and start studying now) and using that clever multiplying by 2 it finally works. My play function is the same as you wrote yourself. But I can not stop wondering what was actually malfunctioning in my code. (I mean the one without that unnecessary array which I hopelessly tried)

Freeman Lambda Over a year ago

Good observation, that change from var to let is not just fancy wording, it is very important and has a very different effect. When you create a function (as inside setTimeout for example) within a for loop, and you use var to declare i, every function will receive the final value of i as its parameter. let works around this issue. See stackoverflow.com/questions/750486/… and read through the answers, particularly the ES6 answer

Collectives™ on Stack Overflow

VueJS setTimeout is not setting the time out

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related