Сделать таймер с помощью setInterval()

Question

Я пытаюсь сделать таймер в javascirpt и jQuery с помощью функции setInterval. Таймер должен отсчитывать от 90 до нуля (в секундах).

код, который я использую для этого:

setInterval(settime(), 1000); 

в этом settime() устанавливает вар time (запускается на 90) -1, это действие должно происходить один раз в секунду. Моя проблема в том, что я не понимаю, как это действие может произойти 90 раз; Я попытался использовать цикл for, но счетчик подсчитывается от 90 до 0 за 1 секунду.

Кто-нибудь знает лучшую альтернативу?

Answer 1

function timer(seconds, cb) { 
    var remaningTime = seconds; 
    window.setTimeout(function() { 
    cb(); 
    console.log(remaningTime); 
    if (remaningTime > 0) { 
     timer(remaningTime - 1, cb); 
    } 
    }, 1000); 
} 

var callback = function() { 
    console.log('callback'); 
}; 

timer(90, callback); 

Внимание при использовании setInterval, не может работать, как вы ожидаете http://bonsaiden.github.io/JavaScript-Garden/#other.timeouts

Answer 2

Что-то вроде этого следует сделать трюк:

var count = 90; 
var interval = setInterval(function(){ 
    setTime(); 
    if (count === 0){ 
    clearInterval(interval); // Stopping the counter when reaching 0. 
    } 
}, 1000); 

у меня нет кода вам нужно, но я уверен, что вам нужно обновить счетчик в какой-то момент на вашей странице.

Вы можете отменить интервал с clearInterval который необходимо идентификатор интервала, который создается при вызове setInterval

Answer 3

setInterval продолжает называть вашу функцию на каждом втором (так как вы используете 1000).

Таким образом, setInterval ожидает функцию как своего первого аргумента, которая является функцией, которая будет вызываться периодически. Но вместо передачи settime вы передадите его возвращаемое значение. Это не сработает, если только settime не возвращает функцию.

Вместо этого попробуйте

setInterval(settime, 1e3); 

Answer 4

Попробуйте с использованием .data(), .queue(), animate(), .promise(); чтобы остановить "обратный отсчет" можно назвать $(element).clearQueue("countdown")

var counter = function counter(el) { 
 
    return $(el || window).data({ 
 
    "start": { 
 
     "count": 0 
 
    }, 
 
    "stop": { 
 
     "count": 1 
 
    }, 
 
    "countdown": $.map(Array(90), function(val, key) { 
 
        return key 
 
       }).reverse(), 
 
    "res": null 
 
    }) 
 
    .queue("countdown", $.map($(this).data("countdown") 
 
    , function(now, index) { 
 
     return function(next) { 
 
     var el = $(this); 
 
     $($(this).data("start")) 
 
     .animate($(this).data("stop"), 1000, function() { 
 
      el.data("res", now) 
 
      $("pre").text(el.data("res")); 
 
      next() 
 
     }); 
 
     } 
 
    }) 
 
) 
 
    .promise("countdown") 
 
    .then(function() { 
 
    $("pre").text($(this).data("res")) 
 
    .prevAll("span").text("countdown complete, count:"); 
 
    }); 
 
    }; 
 
    $("button").on("click", function() { 
 
    if ($(this).is("#start")) { 
 
     counter(); 
 
     $("pre").text(90).prev("span").html(""); 
 
     $(window).dequeue("countdown"); 
 
    } 
 
    else { 
 
     $(window).clearQueue("countdown").promise("countdown")  
 
     .then(function() { 
 
     $("pre").prevAll("span").html(function(_, html) { 
 
     return html.replace("complete", "stopped") 
 
     }); 
 
     })  
 
    } 
 
    });

pre { 
 
    font-size:36px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<button id="start">start</button><button id="stop">stop</button> 
 
<br /> 
 
<span></span> 
 
<br /> 
 
<pre>90</pre>