如何通过另一个事件停止javascript进程?

时间:2012-06-24 06:47:49

标签: javascript javascript-events addeventlistener

考虑我们有一个简单的循环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事件后停止该过程(降低不透明度)。

2 个答案:

答案 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);
});