How to load canvas array after specific time?

Question

My coding skills aren't the best, so I need some help with a current issue of mine.

var canvas;
jQuery(document).ready(function(){
    canvas = jQuery('#myCanvas').canvaDots({
        sizeDependConnections: false,
        randomBounceSides: false,
        dotsColor:[0,0,0,0],
        linesColor:[255,255,255],
        mouseReaction: true,
        magnetPowerDelimiter: 5,
        speed: 1.2
    });

    canvas.loadSpecificArray(1, arrayZ);
    canvas.setSpecificArray(1, function(){});
    canvas.setSpecificArrayOffsetX(10);
});

I need the following lines to get executed after a 3 second delay

canvas.loadSpecificArray(1, arrayZ);
canvas.setSpecificArray(1, function(){});

and the following after a 10 second delay.

canvas.destroytSpecificArrays(arrayZ)

How do I get this done, could you point me to a direction?

Answer 1

There's a native JS method called setTimeout that you can leverage.

setTimeout(function() {
    canvas.destroytSpecificArrays(arrayZ)
}, 10000) //10000 ms = 10 seconds

Hopefully that works

Answer 2

You need to use setTimeout , where 1000 = 1 second

var canvas;
jQuery(document).ready(function(){
canvas = jQuery('#myCanvas').canvaDots({
    sizeDependConnections: false,
    randomBounceSides: false,
    dotsColor:[0,0,0,0],
    linesColor:[255,255,255],
    mouseReaction: true,
    magnetPowerDelimiter: 5,
    speed: 1.2

});
setTimeout(()=>{
canvas.loadSpecificArray(1, arrayZ);
canvas.setSpecificArray(1, function(){});
},3000); // This function will get executed after 3 second

setTimeout(()=>{
canvas.setSpecificArrayOffsetX(10);
},10000) // This function will get executed after 10 second
});

Answer 3

This can simply be setup with the JavaScript setTimeout method. The syntax is simple:

setTimeout(function() {
    // your code
}, 3000) // // time in milliseconds until the above code should execute (e.g. 3000 milliseconds == 3 seconds)

In your specific case, try this code:

var canvas;
jQuery(document).ready(function(){
canvas = jQuery('#myCanvas').canvaDots({
    sizeDependConnections: false,
    randomBounceSides: false,
    dotsColor:[0,0,0,0],
    linesColor:[255,255,255],
    mouseReaction: true,
    magnetPowerDelimiter: 5,
    speed: 1.2
});

setTimeout(function(){ 
    canvas.loadSpecificArray(1, arrayZ);
    canvas.setSpecificArray(1, function(){});
}, 3000);

canvas.setSpecificArrayOffsetX(10);

setTimeout(function(){ 
    canvas.destroytSpecificArrays(arrayZ)
}, 10000);

Answer 4

1000ms = 1s

setTimeout(function(){
    console.log(1);
  console.log(2);
    setTimeout(function(){
    console.log(3);
    },10000);
},3000);