javascript - 在特定时间内运行一个函数

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

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

$('#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);
});