clearInterval on click

Question

私は、ランダムなキーワードが時間間隔で現れる単純なスクリプトを持っています。私が望むのは、クリックした後に出現を止めることです。

は、ここで私がこれまで持っているものです。

          
  
 
   
 
    
function generate() { 
 
$("[id*='keyword']").each(function(){ 
 
$(this).removeClass("show"); 
 
}) 
 
var number= Math.floor(Math.random() * 5) + 1 
 
$("#keyword"+number).addClass("show"); 
 
} 
 
\t \t \t \t 
 
$(function(){ 
 
setInterval(generate, 4000); 
 
}) 
 
\t \t \t \t 
 
$("[id*='keyword']").click(function() { 
 
clearInterval(generate); 
 
});
 
    
div[id*='keyword']{ 
 
background: #aaa; 
 
position: absolute; 
 
left: -200px; 
 
opacity: 0; 
 
width:200px; 
 
line-height: 60px; 
 
text-align: center; 
 
color: white; 
 
height: 60px; 
 
-webkit-transition: 1s all ease; 
 
transition: 1s all ease; 
 
} 
 
div[id*='keyword'].show{ 
 
left: 0; 
 
opacity: 1; 
 
}
 
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="keyword1" class="keyword"> 
 
<h3><a href="#phrase1">Keyword1</a></h3> 
 
</div> 
 
    
 
<div id="keyword2" class="keyword"> 
 
<h3><a href="#phrase2">Keyword2</a></h3> 
 
</div> 
 
    
 
<div id="keyword3" class="keyword"> 
 
<h3><a href="#phrase3">Keyword3</a></h3> 
 
</div>
 
   
 
  
 
 

 

登場するランダムなキーワードが正常に動作しますが、てclearInterval機能ではありません。私はここで簡単な何かを欠いているように感じる。

ありがとうございます！

Answer 1

、その方法のように

var intervalTime=0; 
$(function(){ 
    intervalTime = setInterval(generate, 4000); 
}) 

$("[id*='keyword']").click(function() { 
    clearInterval(intervalTime); 
}); 

Answer 2

変更次のようなあなたの2行のコードを実行します。

window.intervalID = setInterval(generate, 4000); 

と

clearInterval(window.intervalID);