jsのpromise
jsはシングルスレッド。ひとつの流れしか実行することができない。同時に複数のスレッドを実行できない。
animateとか、ajaxとか、setTimeoutなどは、同時に複数走っているように見えるけど、別の人に仕事を振って結果を待っている。js自体はシングル。
これが非同期。
非同期処理を実行すると、jsは実行依頼を誰かに投げて自分は次の処理に移る。
アニメーションが終わってから何かを実行したいという場合にはアニメーションが終わってから実行しますよということを明示しないといけない。
promise().done(function(){}
でそれが実行できる。jQueryの場合。
<script> $( "button" ).on( "click", function() { $( "p" ).append( "Started..." ); $( "div" ).each(function( i ) { $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) ); }); $( "div" ).promise().done(function() { $( "p" ).append( " Finished! " ); }); }); </script>
$(function() { var defer = new $.Deferred().resolve(); defer.promise() .then(function() { return 'Qiitaは、'; }) .then(function(result) { return result + 'プログラミングに関する知識を'; }) .then(function(result) { return result + '記録・共有するための'; }) .then(function(result) { return result + 'サービスです。'; }) .done(function(result) { console.log(result); }); });