以前Chart.jsでグラフを表示する処理をpromiseで処理していく順番で追加の質問です。
ajaxで通信後showData1→showData2と処理してほしいのですがajaxの通信成功時の処理より前にshowData2(flg)が走ってしまいます。
.then()は上から順番に解決していくわけでは無いのでしょうか？

バージョンは

Chart.js Version: 2.7.3
jquery-3.3.1
Bootstrap3
です。

<!-- タブ・メニュー -->
<ul class="nav nav-tabs">
    <li><a href="#sampleContentA" data-toggle="tab">タブＡ</a></li>
    <li class="active"><a href="#sampleContentB" data-toggle="tab">タブＢ</a></li>
</ul>

<!-- タブ内容 -->
<div class="tab-content">
    <div class="tab-pane" id="sampleContentA">
        <canvas id="data1"></canvas>
    </div>
    <div class="tab-pane active" id="sampleContentB">
        <canvas id="data2"></canvas>
    </div>
</div>

$(document).ready(() => {

    let label;
    let data1;
    let data2;
    let flg = false;


        $.ajax({
            //データを取得
        }).then(
            //成功時の処理
            function(data) {
                label= data.label;
                data1= data.data1;
                data2= data.data2;
                let test = flg;//←test = trueになってしまう(ほしいのはfalse)
            }
        ).then(
            showData1
        )
        .then(
            showData2(flg)//←ここが最初に実行されてしまう
        )

    let showData1= () =>{
        let chart ;
        return new Promise(() => {
            chart = new Chart(canvasContext, options);//タブAのcanvasにグラフ表示(詳細省略)
            resolve();
        });
    };


    let showData2 = (flg) =>{
        flg = true;
        let chart ;
        return new Promise(() => {
            chart = new Chart(canvasContext, options);//タブBのcanvasにグラフ表示(詳細省略)
            resolve();
        });
    };
};

行動規範の内容に同意します

回答4件

js
1        .then( function(data) {
2            showData2(flg);
3        } )

投稿2019/01/08 02:57

kei344

総合スコア69398

ベストアンサー

JavaScript
1.then(
2  showData2(flg)//←ここが最初に実行されてしまう
3)

未央「ぜんぜん違うじゃん！」
武Ｐ「……」
未央「言ったよね！？thenメソッドで順番に実行するって…なのに、この結果は何！」
武Ｐ「()で関数の実行がなされるので当然の結果です」
未央「当然？ひどいよ、なんで…私が関数実行しちゃったから？もういいよ、私、フロントエンドやめる！」

という訳で解説

JavaScriptの関数実行は変数や引数等のお尻に()をつけることです。
質問文のコードを見れば、バッチリshowData2(flg)と()を付けて実行してしまっていますね。

promise.thenメソッドの引数には関数を評価した戻り値が格納されます。
thenのタイミングに合わせて関数発火して欲しいって言ってるのに登録時点で実行してしまっては意味がありませんし、
関数入れろって言ってるところにPromiseのインスタンス突っ込んでるのでエラーが発生しそうですね。

解決策としては何かしら関数で括るという方法が一般的です。

JavaScript
1.then(() => showData2(flg))

他にもFunction.prototype.bind()を利用して、
引数にフラグを適用するが関数の評価を待つことが可能です。
第一引数はthisの指定なのでnullを埋めてあげてこんな感じ。

JavaScript
1.then(
2  showData2.bind(null, flg)
3)

投稿2019/01/08 03:26

miyabi-sun

総合スコア21158

miyabi-sun

2019/01/08 04:32 編集

余談です。質問文のコードを上からなめましたが、現象が発生しますという根本的な原因は発生しないはずです。 ``` var flg = false (flg => { flg = true; })(flg) // 無名関数でtrueに変更 console.log(flg); // false ``` JavaScriptはプリミティブ値か、オブジェクト系かで「値渡し」「参照の値渡し」のどちらになるか挙動が変わりますが、変数に対して丸ごと値を代入した場合は束縛が切り離されます。オブジェクトや配列ならば引数のプロパティへの操作等ならば参照が切れないので破壊的操作が可能になります。おそらく`flg`ではなく、`state`みたいなオブジェクトがベースなんだろうと解釈しました。またコードでは登場しないcanvasContext, optionsといった未定義の変数が当然のように飛び出しているので、恐らく質問文のコードは新しく書き起こしたものなんだろうなぁと思ってPromiseのthen周りの挙動に絞って解説しています。

行動規範の内容に同意します

thenの中で非同期処理を走らせれば当然その後の処理は平行処理になるでしょう

javascript
1$(function(){
2  $.ajax({
3  }).then(function(){
4    setTimeout(function(){console.log(1);},200);
5  }).then(function(){
6    setTimeout(function(){console.log(2);},100);
7  });
8});
9

ajaxのthenの中で、promiseで順番を守って下さい
（追記：よく考えたらその必要はない）

javascript
1$(function(){
2  $.ajax({
3  }).then(function(){
4    var d=$.Deferred();
5    d.promise(setTimeout(function(){console.log(1);d.resolve();},200)).done(function(){;
6      setTimeout(function(){console.log(2);},100);
7    });
8  });
9});
10

追記

thenで連続してつなぐならこう書けますね

javascript
1$(function(){
2  var d=Array(3).fill(null).map(function(){return $.Deferred()});
3  $.ajax({
4  }).then(function(){
5    return d[0].promise(setTimeout(function(){console.log(1);d[0].resolve();},300));
6  }).then(function(){
7    return d[1].promise(setTimeout(function(){console.log(2);d[1].resolve();},200));
8  }).then(function(){
9    return d[2].promise(setTimeout(function(){console.log(3);d[2].resolve();},100));
10  }).then(function(){
11    setTimeout(function(){console.log(4);},100);//最後の処理はpromise不要
12  });
13});