Setinterval 口吃生成随机数序列答案

【问题标题】：Setinterval stutters generating a random number sequenceSetinterval 口吃生成随机数序列
【发布时间】：2013-12-20 21:51:07
【问题描述】：

我正在尝试构建一个脚本集，随机生成一个介于 1 到 6 之间的数字，并仅在浏览器中显示该数字。一开始有可能为间隔设置一个值。我有一个完全符合我要求的代码。唯一的问题是区间不平滑。它以某种方式口吃。有人知道如何改进随机数显示流畅的代码吗？

<html>
<body>

<p style="font-size: 500; color: red; text-align: center" id="random_number"></p>

<script>

var interval = parseInt(prompt("Intervall [ms]:", ""));

fRandomNumbers(1,6);

window.setInterval(function(){fRandomNumbers(1,6)}, interval);

function fRandomNumbers(min,max)
{
    var random_number = Math.floor( Math.random() * ( max - min + 1 ) ) + min;             
    document.getElementById("random_number").innerHTML = random_number;
}

</script>

</body>
</html>

【问题讨论】：

所以我完全理解你，你所说的“口吃”是指间隔似乎不准确？有时它比其他时间等待更长的时间？你用的是什么时间间隔？
我尝试了一个 jsfiddle。我注意到有时它看起来可能会卡顿，但那是因为随机生成的数字与原来的数字相同，所以它看起来像是因为缺乏变化而停滞不前。
这正是我的意思。有时需要更长的时间才能出现下一个数字。不知怎的有点不规则。我使用 900 毫秒作为间隔。
尝试附加到innerHtml（使用+=而不是=）并看到它每次都添加一个数字，但有时它会添加相同的数字。大概就是那个摊位吧。
是的，@CoreyOgburn 是对的。您有六分之一的机会连续两次选择相同的数字，而当这种情况发生时，看起来该数字没有改变。

标签： javascript performance setinterval

【解决方案1】：

就像@CoreyOgburn 和@Iwburk 指出的那样，问题是有时你会得到相同的数字：

你有六分之一的机会选择相同的数字两次一行，当发生这种情况时，看起来数字没有改变。

然后，要解决它，只需确保新的随机数与之前的不同即可：

var interval = parseInt(prompt("Intervall [ms]:", "")),
    random_number;

fRandomNumbers(1,6);

window.setInterval(function(){fRandomNumbers(1,6)}, interval);

function rand(min,max,diff) {
    var n;
    while(diff === (n = Math.floor( Math.random() * ( max - min + 1 ) ) + min)){}
    return n;
}

function fRandomNumbers(min,max)
{
    random_number = rand(min,max,random_number);             
    document.getElementById("random_number").innerHTML = random_number;
}

警告 1：上面的 rand 函数会产生无限循环，例如如果像rand(1,1,1)一样调用

警告 2：请注意，生成的数字序列不会是随机的，因为（足够大的）真正的随机序列将包含一些相等的相邻数字。然后，正如@CoreyOgburn 指出的那样，它不能很好地模拟骰子。

【讨论】：

这很好用。对我来说，进一步的改进是允许随机数通常按序列生成。但是看到这一点真的很酷。是否可以改进生成的数字只是闪烁的代码。比什么都没有显示然后下一个随机数闪烁等等？
由于您使用的是 1-6，我想这是一个掷骰子。如果是这种情况，我不会排除重复的滚动（这样做会破坏随机性），而是会使用一些 jQuery 动画来帮助使滚动已经发生明显。这是一个updated jsfiddle，它会淡入淡出以显示一个新号码。
@CoreyOgburn in jsfiddle 它看起来正是我需要的方式。但是当我将它放在我的 html 文档中时它不起作用。我的代码是：
<html> <body> <p style="font-size: 500; color: red; text-align: center" id="random_number"></p> <script> var interval = parseInt(prompt("Intervall [ms]:", "")); fRandomNumbers(1,6); window.setInterval(function(){fRandomNumbers(1,6)}, interval); var count = 0; function fRandomNumbers(min,max) { var random_number = Math.floor( Math.random() * ( max - min + 1 ) ) + min; $('#random_number').fadeOut(100, function() { $(this).html(random_number); $(this).fadeIn(100); }); } </script> </body> </html>
我确实使用了您以前没有使用过的jQuery library。您需要下载并将其添加到您的 html 中。我不想重写他们的淡入/淡出功能。更不用说他们做对了很多其他事情。