Hoe een javascript-proces stoppen door een andere gebeurtenis?

Overweeg dat we een eenvoudig cycling javascript-proces hebben als

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

Bij een moveover -gebeurtenis wordt het proces gestart en voortgezet totdat de voorwaarde wordt bereikt. Hoe we een andere if condition kunnen definiëren om het proces door een andere gebeurtenis te stoppen.

In het huidige voorbeeld, hoe we het proces (het verminderen van de dekking) bij een mouseout -gebeurtenis kunnen stoppen.

0

2 antwoord

Declareer uw id variabele buiten de functie. Vervolgens kunt u clearInterval (id) aanroepen vanuit uw mouseout -handler.

Merk op dat je de test() functie niet echt nodig hebt, je kunt de inhoud ervan direct in je mouseover handler plaatsen:

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);
});
2
toegevoegd
manier om mijn antwoord te kopiëren
toegevoegd de auteur Art, de bron
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);
});
2
toegevoegd