Как установить задержку для стрельбы объектом - PullRequest
Новая
       7

Как установить задержку для стрельбы объектом

1 голос
/ 08 марта 2020

У меня есть код ниже, который будет запускать объект на холсте, который я создал, после нажатия кнопки (на основе разных предположений). Однако я хочу, чтобы между нажатием кнопки и запуском объекта на холст была задержка в 5 секунд, я просто не уверен, где это ввести в моем коде.

Я предполагаю, что мне нужна функция setTimeout, но не уверен. Я понимаю, что приведенный ниже код ничего не сделает в данный момент, но кто-нибудь может сказать мне, где в моем коде мне нужно было бы поместить функцию setTimeout. Я пробовал во многих местах, но безрезультатно.

Спасибо. 

 trigger = function() {
    reset();

    var effect_size = .8;

    localStorage.setItem("value mac", document.getElementById('demo'));
    localStorage.setItem("direction", direction);

    //var y = document.getElementById("myCanvas")
    //const context = y.getContext('2d');
    //context.clearRect(0, 0, y.width, y.height);
    console.log(direction);
    
    console.log ('check????')

    var y = document.getElementById("myCanvas");
    var cir = y.getContext("2d");
    var value_global = document.getElementById('myRange').value;

    console. log(value_global)
    var min_val = (value_global > 1) * ((value_global-1)*.1 - .05);
    if(value_global>1 && value_global<9){
        var range_val = 0.3;
    }else if(value_global==1 || value_global==9){
        var range_val = 0.25;
    }else{
        var range_val = 0.15;
    }
    
    if (direction === 'east') {
      var cen_x = 480-150*value_global/100;
      var cen_y = 300;
      min_val = min_val * effect_size;
    }else if(direction === 'north'){
      var cen_x = 300;
      var cen_y = 70+200*value_global/100;
      min_val = min_val * .2;
    }else if(direction === 'west'){
      var cen_x = 240-150*value_global/100;
      var cen_y = 300;
      min_val = min_val * .2;
    }else if(direction === 'south'){
      var cen_x = 300;
      var cen_y = 322+200*value_global/100;
      min_val = min_val * .2;
    }else{
      alert("Error: Invalid direction.")
    }
    
    cir.globalAlpha = Math.random()*range_val + min_val;

    console.log(cir.globalAlpha)
    
    cir.beginPath();
    cir.arc(cen_x, cen_y, 20, 0, 2 * Math.PI);
 
    cir.fillStyle = "red";
    cir.fill();
    cir.stroke();

  }

1 Ответ

1 голос
/ 09 марта 2020

Часть кода, которая должна быть задержана, должна быть заключена в функцию обратного вызова функции setTimeout, таким образом: 

setTimeout(function() {
    cir.beginPath();
    cir.arc(cen_x, cen_y, 20, 0, 2 * Math.PI);

    cir.fillStyle = "red";
    cir.fill();
    cir.stroke();
}, 5000)

В случае, если кнопка была нажата дважды, затем функция будет выполнена дважды. Если вы хотите предотвратить это (т. Е. Только запустить последний тайм-аут), то timeoutID необходимо сохранить в глобальной переменной, и clearTimeout необходимо вызвать перед повторным вызовом setTimeout. 

let timeoutID

trigger = function() {

    /* ... rest of the code here... */

    if (timeoutID)
        clearTimeout(timeoutID)

    timeoutID = setTimeout(function() {
        cir.beginPath();
        cir.arc(cen_x, cen_y, 20, 0, 2 * Math.PI);

        cir.fillStyle = "red";
        cir.fill();
        cir.stroke();
    }, 5000)

}
...