clearInterval問題（jQuery，javascript）

我在學校任務中遇到了一些問題。無論如何，當我使用startInterval，我分配和intervalID，所以我可以稍後清除間隔。不幸的是，當你按下「停止這個瘋狂」按鈕時，它並不清楚。有人知道爲什麼clearInterval問題（jQuery，javascript）

（如果你想知道所有的背景顏色的東西，我用一個jQuery插件，這是我沒有加入到這個片段），你需要知道

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>

來源

2016-09-09 smod

兩個基本點：

爲setInterval()延時以毫秒爲單位，並且已指定的延遲- 這意味着您已經嘗試安排您的功能每秒運行10000次。在練習中，JS不會讓你在5ms以下運行：指定的任何較短的延遲都會被舍入，但這仍然意味着你的函數每秒鐘運行約200次。
當你調用相同的元素.animate()多次，因爲你是用.gal，#title幹什麼，body，它排隊當前那些完成後，將運行額外的動畫。

把這兩點放在一起，並且每5ms代碼將多個動畫添加到隊列中，每個動畫需要比5ms多得多的動畫。所以即使你撥打clearInterval()，你已經有大量的動畫仍在排隊，他們需要很長時間才能完成。

可以使用.stop()方法停止動畫目前正在進行中，並清除給定元素的動畫隊列：

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

但是，試圖利用setInterval()總是要有點笨重的管理正在進行的動畫，尤其是當你有指定不同時間的多個動畫。但幸運的是，.animate()方法允許您提供一個回調函數，該函數將在動畫完成後運行，以便您可以從那裏安排額外的處理。

您在評論中詢問是否有更有效的方法來管理動畫：對於我建議使用數組的所有顏色更改，噹噹前顏色更改完成後，再次調用.animate()以獲取下一個顏色陣列。

所以，可能類似下面的內容，注意我已經刪除了一些與動畫無關的代碼，以便縮短這個答案，並將動畫代碼分成三個函數這樣可以很清楚什麼對你的每一個做：

$("#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>

來源

2016-09-09 03:32:57 nnnnnn

你是一個生命的救星！ – smod

clearInterval問題（jQuery，javascript）

回答

相關問題