質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

1265閲覧

HerokuにデプロイするとJSの実行順序が変わる

shukonda

総合スコア13

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2017/10/26 09:43

###前提・実現したいこと
Java、AngularJSで作ったWebアプリケーションをHerokuにデプロイしたところ、JSの実行順序が変わる、ということが起こりました。原因が分かれば教えて頂けますでしょうか。

###発生している問題・エラーメッセージ
下記コード、
デベロッパーツールでみると、ローカルでは①→②→③→④の順(上から順番)に動くのですが、
Heroku上では①→③→④→②の順になります。

###該当のソースコード

JavaScript

12angular.forEach(videos.data, function(value, index, array) { 3 4 var like = $sce.trustAsHtml( 5 '<a href="' + ctx + '/video/addlikes?videoId=' + value.id + '"' + 6 ' class="btn btn-default btn-xs" role="button">★</a>'); 7 var hasLiked = false; 8 9 $http({ 10 method: 'GET', 11 url: '/ac/video/get-one-json-by-login-user' 12 }).then(function(loginUserLikeVideos) { ///①/// 13 14 var arr = loginUserLikeVideos.data; ///②/// 15 arr.filter(function(item, index) { 16 if (item.id == value.id) { 17 hasLiked = true; 18 } 19 }); 20 if (hasLiked) { 21 like = $sce.trustAsHtml( 22 '<a href="' + ctx + '/video/delete-like-videos?videoId=' + value.id + '"' + 23 ' class="btn btn-default btn-xs" role="button" style="color:yellow;">★</a>'); 24 } 25 }); 26 27 var youtubeUrl = 'https://www.googleapis.com/youtube/v3/videos?' + ['id=' + 28 encodeURIComponent(value.youtubeId), 29 'key=AIzaSyCi73Clf3nXaxoocsBAp3d9ewlgGGjXuW4', 30 'part=snippet,statistics', 31 ].join('&'); ///③/// 32 33 $http({ ///④/// 34 method: 'GET', 35 url: youtubeUrl 36 }).then(function(data) { 37 $scope.trustSrc = function(src) { 38 return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + src); 39 } 40 $scope.results.push({ 41 video: value, //動画情報 42 data: data.data.items[0],//YouTube情報 43 likeVideoButton: like //いいねボタン 44 }); 45 }); 46 });

###補足情報(言語/FW/ツール等のバージョンなど)
画面はBootstrapを使っています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JSの実行順序が変わる、ということが起こりました。

JavaScriptはシングルスレッドなので、Ajax通信等の結果を待っていると処理が完全に停止してしまいます。
なので、ネット通信やI/O等の愚鈍な処理はイベントに登録だけする設計になっています。
そして操作が終了したらイベントに登録しておいた関数を改めて実行するという流れです。

要するに1〜4のAjaxをとりあえず投げてみて、
結果が帰ってきたら各自設定しておいた関数を叩くという動作だからです。

ローカルで1 -> 2 -> 3 -> 4の流れが保証されていたのは、
全て自分のマシン内で解決する為、通信のコストがほぼ0であり、上の行にあるコードがコンマ数ミリ秒速い為に順番の入れ替わりが発生しない為でしょう。

Heroku等の場合、ネットの状況や解決方法等で何十〜何百ミリ秒の通信時間の差が生まれます。
従って、ほぼ同時に4個の通信を行えば1 -> 4という順番に処理されない可能性は極めて高くなります。


もし順番に通信をしなければ重篤なエラーが発生する場合、
PromiseやAsync等を利用して解決してください。

投稿2017/10/26 09:54

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shukonda

2017/10/27 00:25

ありがとうございます!よく理解できました。 >PromiseやAsync等を利用して解決してください。 今回は上記で対応してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問