Question

在我的下面的代码中，单词被随机推送到div。单词应该每5秒后改变一次。它在正常情况下工作。如果我点击“新”和“看到”这个词每3秒后立即更改一次。但是我给了5秒来改变。我不知道为什么它会在几秒钟内改变。请查看下面的代码。

wordlist = []
wordlist.push({
  word: "ABUNDANCES",
  seen: false
})
wordlist.push({
  word: "BOTANOMANCY",
  seen: false
})
wordlist.push({
  word: "CALUMNIATED",
  seen: false
})
wordlist.push({
  word: "DECISIONING",
  seen: false
})
wordlist.push({
  word: "ENCAPSULATE",
  seen: false
})
wordlist.push({
  word: "FINGERNAILS",
  seen: false
})
wordlist.push({
  word: "GALLIVANTED",
  seen: false
})
wordlist.push({
  word: "HEADBANGING",
  seen: false
})
wordlist.push({
  word: "IMPASSIONED",
  seen: false
})
wordlist.push({
  word: "JEWELFISHES",
  seen: false
})
wordlist.push({
  word: "KILOGRAMMES",
  seen: false
})
wordlist.push({
  word: "LAMPLIGHTER",
  seen: false
})
wordlist.push({
  word: "MANICURISTS",
  seen: false
})
wordlist.push({
  word: "NEPHROTOXIC",
  seen: false
})

function loadRandom() {
  n = Math.floor(Math.random() * wordlist.length);
  $("#status").text(wordlist[n].word);
}
$(function() {
  var interval = setInterval(loadRandom, 5000);
});
loadRandom(); // for initial display


function seen() {
  loadRandom();
}

function unseen() {
  loadRandom();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="status" class="keyword">Test</div>
<a class="btn waves-effect red" id="seen" onClick="seen()">Seen</a>
<a class="btn waves-effect red" id="unseen" onClick="unseen()">New</a>

Answer 1

当您点击＆＃39;看到＆＃39;或者＆＃39; new＆＃39;单词按预期更改，但请记住setInterval仍处于活动状态，它将在5秒后更改单词，无论用户单击“看到了什么”。或者＆＃39; new＆＃39;的按钮。

所以，如果你点击了新的＆＃39;说完＆＃39; n＆＃39;秒，下一个新单词将在（5-n）秒后呈现，而不一定在3秒后呈现，如您所述。您需要做的就是在调用“loadRandom＆＃39;通过＆＃39;看到＆＃39;或者＆＃39;看不见的＆＃39;方法。

重构您的代码如下：

＆＃13;

wordlist = [];

wordlist.push({
  word: "ABUNDANCES",
  seen: false
})
wordlist.push({
  word: "BOTANOMANCY",
  seen: false
})
wordlist.push({
  word: "CALUMNIATED",
  seen: false
})
wordlist.push({
  word: "DECISIONING",
  seen: false
})
wordlist.push({
  word: "ENCAPSULATE",
  seen: false
})
wordlist.push({
  word: "FINGERNAILS",
  seen: false
})
wordlist.push({
  word: "GALLIVANTED",
  seen: false
})
wordlist.push({
  word: "HEADBANGING",
  seen: false
})
wordlist.push({
  word: "IMPASSIONED",
  seen: false
})
wordlist.push({
  word: "JEWELFISHES",
  seen: false
})
wordlist.push({
  word: "KILOGRAMMES",
  seen: false
})
wordlist.push({
  word: "LAMPLIGHTER",
  seen: false
})
wordlist.push({
  word: "MANICURISTS",
  seen: false
})
wordlist.push({
  word: "NEPHROTOXIC",
  seen: false
})

var interval;

function loadRandom() {
     n = Math.floor(Math.random() * wordlist.length);
     $("#status").text(wordlist[n].word);
}

function setMyInterval(){
    interval= setInterval(loadRandom, 5000); 
}

$(function() {
    setMyInterval();
});

loadRandom(); // for initial display

function seen() {
    clearInterval(interval);
    loadRandom();
    setMyInterval();
};
function unseen() {
    clearInterval(interval);
    loadRandom();
    setMyInterval();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="status" class="keyword">Test</div>
<a class="btn waves-effect red" id="seen" onClick="seen()">Seen</a>
<a class="btn waves-effect red" id="unseen" onClick="unseen()">New</a>

＆＃13;

希望这有帮助！

如何快速解决时间间隔runniung？

1 个答案: