Question

我试图模拟轮盘赌轮，每1/10秒显示随机数和背景颜色（黑色或红色）。下面的代码是按照需要工作的，但我希望该函数只运行一段特定的时间，比如5秒。我想我需要使用setTimeout（），但我无法使用下面的代码。

$('#spin').click(function(){
function spinWheel() {
    var rouletteNum = Math.floor((Math.random() * 36) + 1);
    $('#rouletteWheel').html(rouletteNum);
    var color = ['red', 'black']
    var i = [Math.floor(Math.random()*color.length)];
    $('#rouletteWheel').css('background-color', color[i]);
}
   setInterval(spinWheel, 100);
});

Answer 1

为此，我们可以使用Date对象。得到自1970年左右以来的毫秒数。因此，我们用Date.now()定义了一个开始时间并将其称为start，然后在5秒后将其定义为：end = start + 5000。然后我们会在每次调用我们的函数时更新start，一旦start超过end，我们需要使用clear interval结束我们的间隔。

var start = Date.now(); // The current date (in miliseconds)
var end = start + 5000; // 5 seconds afterwords

function spinWheel() {
    start = Date.now(); // Get the date currently
    /* Your code here */
    if(start > end) clearInterval(timer); // If we are 5 seconds later clear interval
}
var timer = setInterval(spinWheel, 100);

Example fiddle - 请注意，它会在5秒后停止

注意：在这种情况下您也可以使用计数器，但是如果您希望在5秒后直接获得时间并且准确无误，则不建议使用，因为它＆＃ 39; setInterval()可能漂移。但大部分时间它都会非常接近。日期会更准确。如果你只是在寻找＆＃34;非常接近或者在5秒钟内，那么做一个计数器就可以了。

Answer 2

一个简单的解决方案是使用计数器

$('#spin').click(function () {
    var counter = 0,
        loopCount = 50 //10 times in a  second * 5 seconds
        ;


    function spinWheel() {
        if (++counter >= loopCount) {
            clearInterval(interval);
        }
        var rouletteNum = Math.floor((Math.random() * 36) + 1);
        $('#rouletteWheel').html(rouletteNum);
        var color = ['red', 'black']
        var i = [Math.floor(Math.random() * color.length)];
        $('#rouletteWheel').css('background-color', color[i]);
    }
    var interval = setInterval(spinWheel, 100);
});

Answer 3

嘿，你可以在例如10次之后清除你的间隔。

    $('#spin').click(function(){
    counter = 0;
    howManyTimes = 10;
    var interval = setInterval(function () {
        counter++
            if(counter === howManyTimes) {
                clearInterval(interval);
                alert('game over');
            } else {
                var rouletteNum = Math.floor((Math.random() * 36) + 1);
                $('#rouletteWheel').html(rouletteNum);
                var color = ['red', 'black']
                var i = [Math.floor(Math.random()*color.length)];
                $('#rouletteWheel').css('background-color', color[i]);
            }
    },100);

   interval();
});

工作示例jsfiddle clear interval

运行一段特定时间的功能

3 个答案: