为啥在这个循环中倒计时顺序会发生变化？

Posted 2023-05-07

【中文标题】为啥在这个循环中倒计时顺序会发生变化？

【英文标题】：Why does the countdown order change in this loop?为什么在这个循环中倒计时顺序会发生变化？

【发布时间】：2020-07-23 22:57:04

【问题描述】：

我对 javascript 完全陌生，一直在尝试学习 while 循环。然而，有一个特殊的例子让我感到困惑，我无法理解。

这是我的代码：

function doItAgain (message)  
    var count = 5;
    while(count > 0)   
        substance.innerhtml = count + "<br>" + substance.innerHTML;
        count = count - 1;
    

    alert("done");

所以我的问题是，为什么当我在换行符之后放置 material.innerHTML 标记时，我得到一个以 1 开头的倒计时，而当我将它放在它之前以 5 开头的倒计时？

我知道这可能是一个愚蠢的问题，但如果你能指导我，这将是巨大的帮助！

提前致谢！

【问题讨论】：

如果直接给出可执行代码可能会更好。 count 当它变为 0 时就像 '5,4,3,2,1,0'，它不会在 while 块内传递。它不应该从1开始。在while循环中尝试console.log(count)

如果我让你在页面上写下数字 5,4,3,2,1，那么顶部会是什么？如果我然后告诉你写相同的数字，仍然从 5 开始，在彼此之上，它会是什么样子？这里的教训是程序按照它们的编码去做。

这就是你应该在循环中设置断点并调试它的地方......

【参考方案1】：

当您使用 count + "<br>" + substance.innerHTML 时，您会将新计数放在之前的计数器之上（例如，您将 counter=2 放入 2，而不是之前的 3 4 5）

当您使用substance.innerHTML + "<br>" + count 时，您首先输入的是第一个，即5 4 3，然后添加计数。

let substance = document.getElementById('myDiv');
function doItAgain ()  
    var count = 5;
    while(count > 0)   
        substance.innerHTML = substance.innerHTML + "<br>" +count;
        count = count - 1;
    

    console.log("done");

doItAgain()

<div id="myDiv"></div>

【参考方案2】：

能否请您澄清一下您的 html，特别是关于“substance.innerHTML”的部分？ 我假设“substance”是 div 的类名是否正确？

我认为您的分配行不正确。行：

substance.innerHTML = count + "<br>" + substance.innerHTML;

您正在对无法相加的项目运行数学逻辑。 当您的代码到达该行时，这些是当前值：

count = 5（数字） = 一个 html 标签（字符串） material.innerHTML =（像字符串？）

所以我认为可能发生的情况是，在一种情况下，Javascript 在 标记处停止，并且在逻辑中不包括“substance.innerHTML”。 而在第二种情况下，它在逻辑中包含了“substance.innnerHTML”，并且仍然忽略了 after.

我无法真正测试您的代码，因为我不确定 material.innerHTML 指的是什么。 让我知道这是否能解决您的问题。 :)

【讨论】：

如果你在多个值上使用+ 操作符并且这些值中的任何一个都是字符串，JS 将进行字符串连接，而不是加法。

啊！正确的！谢谢你纠正我。这真是太好了。

嗨！感谢您的回复。我试图用 innerHTML 做的（至少根据我到目前为止所学到的）是通过 js 修改 html

【参考方案3】：

根据循环中的每次旅行（迭代）后一切都等于什么来考虑它。首先，如果您设置substance.innerHTML = count + "<br>" + substance.innerHTML，我将展示每次迭代的样子：

在第一次运行循环之前

count = 5
substance.innerHTML = ""

第 1 次迭代后

count = 4
substance.innerHTML = "5<br>"

第 2 次迭代后

count = 3
substance.innerHTML = "4<br>5<br>"

迭代 #3 之后

count = 2
substance.innerHTML = "3<br>4<br>5<br>"

第 4 次迭代后

count = 1
substance.innerHTML = "2<br>3<br>4<br>5<br>"

第 5 次迭代后

count = 0
substance.innerHTML = "1<br>2<br>3<br>4<br>5<br>"

由于您已经将计数放在 之前 您在 substance.innerHTML 中设置的所有内容，每次循环时，您最终都会得到一些看起来像是从 1 计数到 @ 987654330@.

如果你设置substance.innerHTML = substance.innerHTML + count + "<br>":

第 1 次迭代后

count = 4
substance.innerHTML = "5<br>"

第 2 次迭代后

count = 3
substance.innerHTML = "5<br>4<br>"

迭代 #3 之后

count = 2
substance.innerHTML = "5<br>4<br>3<br>"

第 4 次迭代后

count = 1
substance.innerHTML = "5<br>4<br>3<br>2<br>"

第 5 次迭代后

count = 0
substance.innerHTML = "5<br>4<br>3<br>2<br>1<br>"

由于您已经将计数置于您在 material.innerHTML 中设置的所有内容之后，因此每次通过循环时，您最终都会得到一些看起来像是从 5 倒数到 1 的东西。

【讨论】：

谢谢！你的解释真的很有帮助！