どのように時間間隔を迅速に解決するためにrunniung？

Question

私の下のコードでは、単語は無作為にdivにプッシュされます。単語は5秒ごとに変更されるはずです。正常な状態で動作します。私が "New"をクリックし、3秒後にすぐに単語が変わるのを見た場合、私は5秒間変化しました。私はなぜ秒以内に変化しないのですか？私の下のコードを見直してください。あなたは「見て」や、予想通り「新しい」単語が変更されたをクリックして、まだアクティブであり、それは関係なく、ユーザがクリックの5秒後に言葉を変えます心のsetIntervalに保つ

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

'見た'または '新しい'ボタン。

「n」秒後に「新規」をクリックすると、次の新しい単語が（5-n）秒後にレンダリングされます。あなたがする必要があるのは、 '見られた'または '見えない'メソッドを通して '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>

ホープ、このことができます！