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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2873閲覧

jqueryでトーストポップアップを複数表示しないようにしたい

nosonosolife

総合スコア42

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/02/08 05:39

jqueryで、スクリプト上で何らかのエラーが発生した際にトーストポップアップを表示する関数を作成しました。
トーストは.appendでHTML内に追加し、.animateで画面上から降りてきて、5秒経ったら画面上に昇っていくのですが、
稀に同時に複数のエラーが発生した場合、トーストが複数表示されてしまいます。
画面上に既にトーストが表示されている場合、それ以上表示しない、もしくはそのトーストが消えてからその次のトーストを表示するようにするにはどうすればいいでしょうか。

ご教授よろしくお願いいたします。

javascript

1function displayToast(title,message){ 2 var elem = $("<article/>").attr('id', "toast"); 3 var elem_h2 = $("<h2/>").text(title); 4 var elem_p = $("<p/>").text(message); 5 6 elem.append(elem_h2).append(elem_p); 7 $("body").append(elem); 8 elem.stop().animate({top: 55}, 500); 9 10 setTimeout(function() { 11 elem.stop().animate({top: -200}, 500, function() { 12 elem.remove(); 13 }); 14 }, 5000); 15} 16 17//実行 18displayToast("エラー",'エラーが発生しました。');

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

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

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

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

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

guest

回答1

0

ベストアンサー

トーストを表示してる最中にエラーが発生したら、配列にためておいて、トースト終了時に配列がたまってたら次のメッセージを取り出してトーストを表示(メッセージの数分ループ)すればいいと思います。

js

1var msgs = []; 2var toastBusy = false; 3 4function displayToast(title, message) { 5 if (toastBusy) { 6 msgs.push({ title: title, message: message }); 7 return; 8 } 9 var elem = $("<article/>").attr('id', "toast"); 10 var elem_h2 = $("<h2/>").text(title); 11 var elem_p = $("<p/>").text(message); 12 13 elem.append(elem_h2).append(elem_p); 14 $("body").append(elem); 15 toastBusy = true; 16 elem.stop().animate({ top: 55 }, 500); 17 setTimeout(function() { 18 elem.stop().animate({top: -200}, 500, function() { 19 elem.remove(); 20 toastBusy = false; 21 if (msgs.length) { 22 var msg = msg.shift(); 23 displayToast(msg.title, msg.message); 24 } 25 }); 26 }, 5000); 27}

投稿2017/02/08 06:43

turbgraphics200

総合スコア4267

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

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

nosonosolife

2017/02/08 07:46

ご提示していただいたコードに書き換えたところ上手くいきました。 ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問