clearInterval Ausgabe (jquery, javascript)

Ich habe einige Probleme mit einer Schulaufgabe. Sowieso, wenn ich startInterval verwende, weise ich und intervalID zu, also kann ich später das Intervall löschen. Leider löscht es nicht, wenn Sie den "Stop this Madness" Knopf drücken. Wer weiß warum?clearInterval Ausgabe (jquery, javascript)

(wenn Sie sich fragen, über all die Hintergrundfarbe Sachen habe ich ein jQuery-Plugin, das ich nicht auf diese Schnipsel nicht hinzugefügt)

var intervalID; 
 
$('.gal').click(function() { 
 
    var photoID = jQuery(this).attr("id"); 
 
    alert(alerts[photoID]); 
 
}); 
 

 
var alerts = { 
 
    //row one 
 
    "1:1": "This animal is a penguin!", 
 
    "1:2": "This animal is a lion!", 
 
    "1:3": "This animal is a cat!", 
 
    "1:4": "This animal is a giraffe!", 
 
    //row two 
 
    "2:1": "Cool looking ancient building!", 
 
    "2:2": "Cool looking modern building!", 
 
    "2:3": "Cool building from dubai!", 
 
    "2:4": "Cool building by the water!" 
 
}; 
 

 
$("#stop").click(function() { 
 
    clearInterval(intervalID); 
 
}); 
 

 
$(window).load(function() { 
 
    animate(); 
 
}); 
 

 
function animate() { 
 
    intervalID = setInterval(function() { 
 
    var width = 25; 
 
    $(".gal").animate({ 
 
     'marginLeft': '-=25px' 
 
    }); 
 
    $(".gal").animate({ 
 
     'marginLeft': '+=25px' 
 
    }); 
 
    $("#title").animate({ 
 
     'marginLeft': '+=' + width + 'px' 
 
    }, "slow"); 
 
    $("#title").animate({ 
 
     'marginLeft': '-=' + width + 'px' 
 
    }, "slow"); 
 
    $("body").animate({ 
 
     'backgroundColor': 'lightyellow' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'yellow' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'orange' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'red' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'lightpink' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'pink' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'purple' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'blue' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'lightblue' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'cyan' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'green' 
 
    }, 1000); 
 
    $("body").animate({ 
 
     'backgroundColor': 'lightgreen' 
 
    }, 1000); 
 
    }, 0.1); 
 
}

body { 
 
    background-color: lightyellow; 
 
} 
 
#title { 
 
    display: block; 
 
    /*position:absolute;*/ 
 
} 
 
.gal { 
 
    display: block; 
 
    margin: 20px; 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 5px solid black; 
 
} 
 
#stop { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    border: 3px solid red; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>JS Functions</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script> 
 

 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <button id="stop" class="btn-warning">Stop This Madness!</button> 
 
    <h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1> 
 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <img id="1:1" src="http://ngm.nationalgeographic.com/2012/11/emperor-penguins/img/02-airborne-penguin-exits-water_1600.jpg" class="gal"> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="1:2" src="http://efdreams.com/data_images/dreams/lion/lion-03.jpg" class="gal"> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="1:3" src="https://s3.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg" class="gal" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="1:4" src="https://upload.wikimedia.org/wikipedia/commons/0/02/Giraffe_Ithala_KZN_South_Africa_Luca_Galuzzi_2004.JPG" class="gal"> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script></script> 
 
    <script src="script.js"></script> 
 
</body> 
 

 
</html>

Quelle

2016-09-09 smod

Zwei allgemeine Punkte, die Sie wissen müssen :

Die Verzögerung für setInterval() in Millisekunden angegeben ist, und eine Verzögerung von 012.303.210 angegeben haben- was bedeutet, dass Sie versucht haben, Ihre Funktion so zu planen, dass sie 10000 Mal pro Sekunde ausgeführt wird. In der Praxis lässt JS Sie nicht unter 5 ms gehen: Jede angegebene kürzere Verzögerung wird aufgerundet, aber das bedeutet, dass Ihre Funktion ungefähr 200 Mal pro Sekunde ausgeführt wird.
Wenn Sie .animate() mehrere Male auf dem gleichen Element nennen, wie Sie mit .gal tun, #title und body, reiht es zusätzliche Animationen auf, die ausgeführt wird, nachdem die aktuellen, zu beenden.

Putting diese beiden Punkte zusammen, und alle 5 ms Code fügt mehrere Animationen in die Warteschlange, von denen jeder viel länger als 5 ms dauert. Selbst wenn Sie also clearInterval() anrufen, haben Sie bereits eine Menge Animationen in der Warteschlange, die sehr lange dauern werden.

Sie sind zur Zeit stoppen können Animationen im Gange, und deaktivieren Sie ein bestimmtes Element der Animation Warteschlange mit der .stop() Methode:

$(".gal").stop(true);

Aber versuchen laufenden Animationen zu verwalten mit setInterval() immer ein bisschen klobig sein wird, vor allem, wo Sie mehrere Animationen mit unterschiedlichen Zeiten angegeben. Aber glücklicherweise können Sie mit der Methode .animate() eine Rückruffunktion bereitstellen, die nach Abschluss der Animation ausgeführt wird, sodass Sie von dort aus weitere Verarbeitungsschritte planen können.

Sie haben in einem Kommentar gefragt, ob es eine effizientere Möglichkeit gibt, die Animationen zu verwalten: Für all diese Farbänderungen würde ich ein Array verwenden. Wenn die aktuelle Farbänderung abgeschlossen ist, rufen Sie erneut die Farbe .animate() an Array.

Also vielleicht etwas wie das folgende, merke, dass ich etwas von dem Code entfernt habe, der sich nicht auf die Animationen bezog, um diese Antwort etwas kürzer zu machen, und ich habe den Animationscode in drei Funktionen aufgeteilt es klarer für Sie zu machen, was jeder tut:

$("#stop").click(function() { 
 
    $(".gal, #title, body").stop(true); 
 
}); 
 

 
$(window).load(function() { 
 
    animateGallery(); 
 
    animateTitle(); 
 
    animateBody(); 
 
}); 
 

 
function animateGallery() { 
 
    $(".gal").animate({ 
 
    'marginLeft': '-=25px' 
 
    }, "slow").animate({ 
 
    'marginLeft': '+=25px' 
 
    }, "slow", animateGallery); // note the function set as final argument 
 
           // - it will be called when animation finishes 
 
} 
 

 
function animateTitle() { 
 
    var width = 25; 
 
    $("#title").animate({ 
 
    'marginLeft': '+=' + width + 'px' 
 
    }, "slow").animate({ 
 
    'marginLeft': '-=' + width + 'px' 
 
    }, "slow", animateTitle); // note the function set as final argument 
 
} 
 
    
 
var colors = ['lightyellow', 'yellow', 'orange', 'red', 'lightpink', 'pink', 'purple', 'blue', 'lightblue', 'cyan', 'green', 'lightgreen']; 
 
var currentColor = 0; 
 

 
function animateBody() { 
 
    $("body").animate({ 
 
    'backgroundColor': colors[currentColor] 
 
    }, 1000, animateBody); // note the function set as final argument 
 
    currentColor = (currentColor + 1) % colors.length; 
 
}

#title { display: block; } 
 
.gal { display: block; margin: 20px; width: 250px; height: 200px; border: 5px solid black; } 
 
#stop { position: fixed; z-index: 100; bottom: 0; right: 0; border: 3px solid red; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>JS Functions</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <button id="stop" class="btn-warning">Stop This Madness!</button> 
 
    <h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1> 
 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-09-09 03:32:57 nnnnnn

du bist ein Lebensretter! – smod

clearInterval Ausgabe (jquery, javascript)

Antwort

Verwandte Themen