如何快速解決時間間隔runniung？

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

當你點擊「看到」或「新」字是改變預期，但要記住的setInterval仍然活躍5秒無論用戶點擊後它會改變字'看到'或'新'按鈕。

因此，如果您在說'n'秒後點擊'新'，下一個新單詞將在（5-n）秒後呈現，不一定在3秒後呈現。您只需通過'看過'或'看不見'的方法調用'loadRandom'即可清除間隔。

如下重構代碼：

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(); 
 
}

<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>

希望這有助於！