Question

使用javascript，我正在尝试模拟掷骰子。我正在使用setTimeout但我想在函数运行一定次数之后执行clearTimeout，比如说10。这就是我希望它如何运作。

用户单击按钮。然后他们看到div中显示了一系列骰子值（显然是1-6）。然后，在说完之后，功能会停止10次。

怎么能完成？我到目前为止的代码非常简单。

function rollDice(){
diceVal = Math.floor(Math.random() * 7);
$('.dice-display').html(diceVal);
setTimeout(rollDice, 500);

// 10次后清除超时 }

$('.rollDiceButton').click(function(){
rollDice();

});

Answer 1

这是闭包的理想用例：

var rollDice = ( function rollDiceClosure(){
    var iterations = 0;

    return function rollDice(){
        var diceVal = Math.floor(Math.random() * 7);

        $('.dice-display').html(diceVal);

        if( ++iterations >= 10 ){
            setTimeout(rollDice, 500);
        }
    }
}() );

闭包为iterations变量创建了一个空格。在setTimeout语句之前，iterations增加1。如果它等于或大于10，则不会设置超时。

Answer 2

var numTimes = 0; //Create a variable that will be incremented
function rollDice(){
    diceVal = Math.floor(Math.random() * 7);
    $('.dice-display').html(diceVal);
    if (numTimes < 10) setTimeout(rollDice, 500); //only setTimeout if it's been rolled less than 10 times
    numTimes++; //increment
}

Answer 3

您需要使用“setInterval”而不是“setTimeout”。 “setTimeout”只会在初始定时器后执行一次函数调用。

$('.rollDiceButton').click(function(){
   var counter = 0;
   var timer = setInterval(function(){
        if(counter < 10){
            diceVal = Math.floor(Math.random() * 7);
            $('.dice-display').html(diceVal);
            counter++;
        }
        else{
            clearInterval(timer);
        }
}, 500);

在点击事件中初始化一个计数器。计数器每半秒（500毫秒）打一个计数器。一旦达到10次重复，使用“clearInterval”

停止计时器

如何在函数触发10次后实现clearTiimeout？模拟骰子卷

3 个答案: