The setTimeout function in VueJS seems to be malfunctioning and not properly setting the

Question

The setTimeout function in VueJS seems to be malfunctioning and not properly setting the

I am attempting to play sounds in sequence using setTimeout. In my array named challenge, I have (for testing purposes) the values [0,1,2,3]. Additionally, I have a function called play(n, true) for starting the sound and play(n, false) for stopping the sound. My goal is to:

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

This is what I have attempted up to this point:

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);
            }
        }
    }
}

When I omit the array, all the sounds play simultaneously and occasionally produce the desired sound. However, utilizing the array results in an object error.

javascript vue.js settimeout vuejs2

Answer 1

Answer №1

What is the benefit of creating an array if you don't intend to reference the timeouts later? Consider spacing out timers manually by 1 second instead.

// Here's a mock code example:
var task = [0, 1, 2, 3];

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

function execute(taskIndex, performAction) {
  if (performAction) {
    console.log("executing task: " + taskIndex);
  } else {
    console.log("stopping task execution: " + taskIndex);
  }
}

Answer 2

What is the benefit of creating an array if you don't intend to reference the timeouts later? Consider spacing out timers manually by 1 second instead.

// Here's a mock code example:
var task = [0, 1, 2, 3];

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

function execute(taskIndex, performAction) {
  if (performAction) {
    console.log("executing task: " + taskIndex);
  } else {
    console.log("stopping task execution: " + taskIndex);
  }
}

The setTimeout function in VueJS seems to be malfunctioning and not properly setting the

Answer №1

Similar questions

Using JavaScript to automate keystrokes programmatically

Conceal one element and reveal a different one upon submitting a form

I'm baffled on how to find access to ParametricGeometry within Three.js

Optimizing JSON data by recursively removing empty values, converting strings to booleans, and trimming whitespace using jq - best practices?

Is it possible for a Simplemodal popup to appear only once per user session

Continue perusing the Angular JS HTTP request

changing the default property value within an object

Troubleshooting Checkbox Problems on Internet Explorer 6

Is it possible to execute custom JavaScript code in an R Jupyter notebook?

Protect a one-page application using Spring's security features

Adding a fresh element to an object array in TypeScript

Tips on transforming JSON data into a hierarchical/tree structure with javascript/angularJS

Using Jquery and CSS to display or conceal table elements depending on viewport width

What is the best way to split an input field into distinct fields for display on the screen?

BufferGeometry's Vertices

When utilizing React Hooks, passing a prop from a parent component to a child component may result in the prop being undefined in the child component

Is there a way to run /_next/static/xxx.js using a script tag?

How come my fixed navigation bar is appearing above my sticky navigation bar even though I positioned it at the bottom in the code?

The function _path2.default.basename does not work when using convertapi within an Angular framework

What makes TypeScript unique is that it is completely written in TypeScript, with TypeScript accounting for 100