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

时间:2014-01-01 19:06:08

标签: javascript

使用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();

});

3 个答案:

答案 0 :(得分:3)

这是闭包的理想用例:

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,则不会设置超时。

答案 1 :(得分: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
}

答案 2 :(得分:1)

您需要使用“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”

停止计时器