时间戳

首页 > 解决方案 > setInterval 不重复单词更改

javascript - setInterval 不重复单词更改

问题描述

我正在了解 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>

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

标签： javascriptarrayshtml

解决方案

你可能误解了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 调用，但这也不是绝对必要的。

推荐阅读