考虑我们有一个简单的循环javascript过程
function test() {
el=document.getElementById("test");
var opacity = 1;
var id = setInterval(function() {
opacity = opacity - 0.1;
el.style.opacity= opacity;
\\ if(mouseout) {clearInterval(id);} How to do this?
if(opacity == 0) {clearInterval(id);}
}, 500);
}
document.getElementById("test").
addEventListener('mouseover', function(){
test();
});
在moveover
事件发生后,流程会启动并继续,直到达到if condition
。我们如何定义另一个if condition
以通过另一个事件来停止该过程。
在当前示例中,我们如何在mouseout
事件后停止该过程(降低不透明度)。
答案 0 :(得分:2)
在函数外声明您的id
变量。然后,您可以从clearInterval(id)
处理程序中调用mouseout
。
请注意,您并不真正需要test()
函数,您可以将其内容直接放在鼠标悬停处理程序中:
var id,
el = document.getElementById("test");
el.addEventListener('mouseover', function(){
var opacity = 1;
id = setInterval(function() {
opacity = opacity - 0.1;
el.style.opacity= opacity;
if(opacity == 0) {clearInterval(id);}
}, 500);
});
el.addEventListener('mouseout', function() {
clearInterval(id);
});
答案 1 :(得分:2)
var el = document.getElementById("test"),
opacity = 1,
id;
el.addEventListener('mouseover', function(){
id = setInterval(function() {
opacity = opacity - 0.1;
el.style.opacity= opacity;
if(opacity == 0) {clearInterval(id);}
}, 500);
});
el.addEventListener("mouseout", function() {
clearInterval(id);
});