单击clearInterval

Question

我有一个简单的脚本，其中随机关键字以定时间隔出现。我想要的是让他们在点击一个之后停止出现。

这是我到目前为止所拥有的：

function generate() {
$("[id*='keyword']").each(function(){
$(this).removeClass("show");
})
var number= Math.floor(Math.random() * 5) + 1
$("#keyword"+number).addClass("show");
}
				
$(function(){
setInterval(generate, 4000);
})
				
$("[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

更改代码的两行，如下所示：

 window.intervalID = setInterval(generate, 4000);

和

clearInterval(window.intervalID);