てclearInterval問題（jqueryの、ジャバスクリプト）

私は学校の割り当てのいくつかの問題があります。とにかく、startIntervalを使用すると、私はassignとintervalIDので、後で間隔をクリアすることができます。残念ながら、あなたが「この狂気を止めてください」ボタンを押すと、それは明確になりません。誰でも知っている理由は？てclearInterval問題（jqueryの、ジャバスクリプト）

（あなたは私が、私はこのスニペットに追加しなかった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()の遅延はミリ秒単位で指定されている、とあなたはの遅延を指定しています- つまり、1秒間に10000回実行するように関数をスケジュールしようとしました。実際には、JSは5ms未満にすることはできません：指定された短い遅延は切り上げられますが、それでもあなたの関数は約200回/秒で実行されます。あなたが.gal、#title、およびbodyでやっているようあなたは、同じ要素に.animate()を複数回呼び出すと
、それが現在のものが終了した後に実行される追加のアニメーションを並びます。

5msごとに5msごとに、それぞれのコードが複数のアニメーションをキューに追加します。各アニメーションは5msよりも長くかかります。したがって、clearInterval()と呼んでも、既にたくさんのアニメーションがキューに入れられており、完了するまでに時間がかかります。

あなたは現在進行中のアニメーションを停止し、.stop()方法を使用して、指定された要素のアニメーションキューをクリアすることができます。

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

しかしsetInterval()を使用して継続的なアニメーションを管理しようとすると、常に少し不格好になるだろう、あなたが持っている特にどこ異なる時間を指定した複数のアニメーション。しかし、幸いにも.animate()メソッドを使用すると、アニメーションの完了後に実行されるコールバック関数を提供できるため、そこから追加の処理をスケジュールできます。

アニメーションをより効率的に管理する方法があるかどうかをコメントで尋ねました。これらの色の変更については、配列を使用することをお勧めします。現在の色の変更が完了すると、.animate()アレイ。

多分、次のように、この答えを少し短くするためにアニメーションに関連しないコードのいくつかを削除したことに気づき、アニメーションコードを3つの関数あなたのためにそれをより明確にするためにそれぞれが何をしているか：

$("#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の、ジャバスクリプト）

答えて

関連する問題