0

次のような単純な循環 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。

4

2 に答える 2

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);
});
于 2012-06-24T06:50:31.303 に答える
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);
});
于 2012-06-24T06:53:33.113 に答える