Question

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

Answer 1

在函数外声明您的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);
});

Answer 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);
});

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

2 个答案: