Question

我对JavaScript有所了解，并希望创建一个非交互式词典项目。我将单词写为段落，然后使用DOM作为函数将单词更改为定义。当我使用setInterval运行该函数时，它不会重复。为什么？

'use strict';
//below is the function for the even
$(document).ready(function(){
//

function salutation(){
    document.getElementById("Salutation").textContent ="hello";


}
setInterval(salutation, 1000);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>YOUR TITLE HERE</title>
    <link rel ="stylesheet" href="jquery.css">
    <script src="jquery.js" type="application/javascript"></script>
    <script src="handler.js" type="application/javascript"></script>
  </head>
  <body>  
   <h1>hello welcome to our dictionary</h1>

    <p>Come see what words we have to offer</p>
    <br>
    <p id = Salutation >1.Saluation</p>

  </body>
</html>

由于某种原因，代码不会重复，导致文本在单词和定义之间不断变化。为什么？

Answer 1

您可能会误解setTimeout的性质。它所做的全部工作就是按照第二个参数指定的间隔运行第一个参数函数。由于您的函数始终执行完全相同的操作，即将textContent元素的Salutation属性设置为"hello"，因此它似乎无济于事。没有这种默认的交替行为；您必须使用某种条件添加该逻辑。例如：

function salutation(elem) {
  elem.innerText = elem.innerText === "hello" ? "world" : "hello";
}

setInterval(salutation, 1000, document.getElementById("salutation"));

<h1>hello welcome to our dictionary</h1>
<p>Come see what words we have to offer</p>
<br>
<p id="salutation">1.Saluation</p>

请注意，我已经删除了ready处理程序，并在id属性周围添加了引号和空格并将其小写。这些是样式约定，在某些情况下会很重要，但是在这种情况下就不是问题了，假设您的setTimeout函数与salutation函数处于同一范围内（您缺少右括号和括号）不清楚）。

最后，我已将elem作为第三个参数添加到setTimeout调用中，以进行范围界定和避免额外的DOM调用，但这也不是必须的。

setInterval不重复单词更改

1 个答案: