使用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();
});
答案 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”
停止计时器