ループ中にボタンを表示し、ボタンが押されるまでループを止める方法について教えてください。
こちらの記事を参考にして、javascriptでボットプログラムを作成しています。
起動されると、ボットはあらかじめ用意されたJsonファイルをajaxで読み出し、配列に代入して順に処理していきます。取り出したデータには"id"や"type"などのオブジェクトがあり、それぞれ処理の順番や要求される動作についてのタグになっています。
下が作成中のプログラムです。
json
1[ 2 { 3 "id":"1", 4 "type":"choice", 5 "value":["hoge1","hoge2","hoge3"], 6 "inline":[ 7 "id1":"1", 8 "id2":"hoge1", 9 "type":"text", 10 "value":"hoge1が押されました" 11 ] 12 }, 13 { 14 "id":"2", 15 "type":"text", 16 "value":"hogehoge" 17 } 18] 19
javascript
1let jdatatmp=[]; 2let num = 0; 3$(document).ready(function(){ 4 5 //文字列(html要素)を格納できる配列を定義 6 var chatDom =[]; 7 //文字列(この場合は引数のdom)を配列の要素として格納できる関数 8 var p = function(dom){ 9 chatDom.push(dom); 10 }; 11 12 //配列の要素として一つ一つ格納していき、最後にjoin関数で結合する 13 //チャットの外側部分① 14 p('<div id="bms_messages_container">'); 15 16 //ヘッダー部分② 17 p('<div id="bms_chat_header">'); 18 p('<div id="bms_chat_user_status">'); 19 p('<div id="bms_status_icon">●</div>') 20 p('<div id="bms_chat_user_name">ユーザー</div>'); 21 p('</div>'); 22 p('</div>'); 23 //タイムライン部分③ 24 p('<div id="bms_messages">'); 25 26 //メッセージ1(左側) 27 p('<div class="bms_message bms_left">'); 28 p('<div class="bms_message_box">'); 29 p('<div class="bms_message_content">'); 30 p('<div class="bms_message_text">ほうほうこりゃー便利じゃないか</div>'); 31 p('</div>'); 32 p('</div>'); 33 p('</div>'); 34 p('<div class="bms_clear"></div>'); 35 p('</div>'); 36 37 p('<div id="PushMore">'); 38 p('</div>'); 39 40 // テキストボックス、送信ボタン④ 41 p('<div id="bms_send">'); 42 p('<textarea id="bms_send_message"></textarea>'); 43 p('<div id="bms_send_btn">送信</div>'); 44 p('</div>'); 45 46 //jQueryのappend関数を使って、your_containerの直下にhtml要素を書き加える 47 $('#your_container').append(chatDom.join('')); 48 49 $.ajax({url:'json',datatype'json'}) 50 .done(function(data){ 51 $(data).each(function(){ 52 jdatatmp[num] = data; 53 num=num+1; 54 }); 55 mainBot(jdatatmp); 56 }); 57}); 58 59function mainBot(jdata){ 60 for(var i = 0,i<=jdata.length-1,i++){ 61 dataTypeCheck(jdata[i]); 62 } 63} 64 65function dataTypeCheck(jdata){ 66 switch(jdata.type){ 67 case "text": 68 $('#PushMore').append('<div class="bms_message bms_left"><div class="bms_message_box"> 69 <div class="bms_message_content"><div class="bms_message_text">'+jdata.value); 70 $('#PushMore').append('<div class="bms_clear">') 71 break; 72 73 case "choice": 74 ボタンを表示する処理 75 var str=[]; 76 for(var i = 0 ;i<jdata.value.length;i=i+1){ 77 str[i]= '<div class="bms_message_btn" onclick="ButtonClickedMove(\''+jdata.value[i]+'\');>' + jdata.value[i] + '</div>'; 78 } 79 var a=""; 80 for(var i = 0 ;i<str.length;i++){ 81 a = a + str[i]; 82 } 83 84 $("#PushMore").append('<div class="bms_message bms_left"><div class="bms_message_box"><div class="bms_message_content"><div class="bms_message_text">' + jdata.text + '<br>' + a); 85 $("#PushMore").append('<div class="bms_clear">'); 86 break; 87 } 88} 89 90function ButtonClickedMove(i){ 91 92 console.log("gt"+i); 93 var text=[]; 94 text=textChoice(i); 95 96 for(var i = 0 ;i<text.length;i++){ 97 //左側 回答要素 98 $("#PushMore").append('<div class="bms_message bms_left"><div class="bms_message_box"><div class="bms_message_content"><div class="bms_message_text">' + text[i]); 99 } 100 101 $("#PushMore").append('<div class="bms_clear">'); 102 103 104 if(i==0){ 105 return 106 } 107} 108
取り出したJsonオブジェクトのtypeがtextの場合、プログラムはValueの値をそのまま表示します。しかしchoiceだった場合は、Valueの値をButtonClickedMoveファンクションでボタン化し、表示します。
この時、今のままではJsonから取り出したすべての処理を一気にやってしまいます。typeがtextの場合はそれでもいいのですが、choiceの場合は一時停止し、ユーザーがボタンを押してから改めて次の配列を処理したいです。色々と調べて非同期通信やSleep機能での一時停止などは見つかりましたが、今回の場合はどうも使えそうにありません。
この場合、どんな技術をどのように使えば望む結果が出せるでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/11 12:18 編集