前回の投稿の続きになります。
setTimeoutとボタン押下の処理がうまくいかない
ajaxがうまくいかない
現在cakePHP3,PHP,HTML(ctp),JavaScript(jQuery)を使ってアプリ開発をしています。
テキストボックスに入力すると、その0.5秒後に赤になり、ボタン押下時に必ずBoxが青になるというものです。
ボタン押下時はテキストボックスをクリアしているので、テキストボックスが空の時は必ず青になる想定です。
画面 テキストボックス入力時↓
画面 ボタン押下時↓
前回の投稿では、「青を表示」ボタン押下時にclearTimeoutをすることで、ボタン押下時は必ず青にすることができました。
ただ今回Ajax処理を導入したことで、ときどきボタン押下後に赤になるケースが出てきました。
テキストボックス入力後、0.5秒経つギリギリ前のタイミングでボタン押下するとなりやすいです。
質問内容としては、
この赤になるケースの原因を解決し、ボタン押下時に必ず青にするにはどうしたらいいか知りたい。
というものです。
コードは以下になります。
settimeout.ctp
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.box1{
width: 150px;
height: 150px;
background-color: aqua;
margin-top: 20px;
}
.box2{
width: 150px;
height: 150px;
background-color: red;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<br>
<input type="text" id="text" oninput="red(this)">
<input type="button" id="aqua" value="青を表示">
<div class="box1"></div>
<div class="box2"></div>
</body>
<script>
// ボタン押下時、「青」に変える
var timer = false;
$("#aqua").click(function(){
if (timer !== false) {
clearTimeout(timer);
}
$('div.box1').show();
$('div.box2').hide();
$('#text').val('');
});
// 「赤」に変える。oninput処理を何度も走らせないため１秒後に実行
function red(_this){
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function(){
$.ajax({
url: "http://localhost/cakephp3/Sample/blue",
}).done(function(){
$('div.box1').hide();
$('div.box2').show();
console.log(_this.value);
}).fail(function(){
console.log('error!!!');
});
},500);
}
// ボタンを押した時、常に「青」になるようにしたい。
// 現状テキストボックス入力後、０．５秒経つギリギリ前のタイミングでボタンを押すと、「赤」になるケースが出てくる
// 秒数やsetTimeoutの処理は維持し、ただボタン押下時は常に青になるようにしたい
</script>
</html>SampleController.php
<?php
namespace App\Controller;
use App\Controller\AppController;
class SampleController extends AppController
{
//初期表示で呼ばれるアクション
public function setTimeout()
{
}
//Ajaxで呼ばれるアクション
public function blue()
{
$this->autoRender =false;
}
}ボタン押下時にclearTimeout(timer);で赤にするsetTimeoutの処理を止めているつもりなのですが、
Ajaxが非同期だからかなのか原因は明確にはわかっていませんが、赤にする処理も走ってしまうことがあるようです。
AjaxもsetTimeout処理内に書いているので、ボタン押下時のclearTimeout(timer);でAjax処理も防げると思っていたのですが。
もしこの問題の原因や解決策がわかる方がいらっしゃいましたら教えていただけるとありがたいです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
oninput処理を何度も走らせないため
という目的のために setTimeout を使っていること自体が、ちょっとスジがよくないな、と思うのですが、「入力があって 0.5 秒後に ajax のリクエストを飛ばしたい」というの目的なのであれば、それはそれで仕方がありませんが、それは「スジの悪さ」が実装から設計に移っただけかな、という気もします。
というのは余計なお世話ですかね。
さて、原因については、推察されているように、
- タイマーの設定で ajax リクエストが飛ぶ
- ボタン押下してタイマー解除して「青」にする
- ajax のレスポンスが戻ってきて「赤」にする
ということかと思います。「テキストボックスが空のときには青にしておく」ということをやりたいのであれば、とりあえずの work around として ajax のレスポンスが戻ってきたときにテキストボックスが空かどうか調べ、空じゃないときに「赤」にする、というのはどうでしょうか。私の感覚ではあくまでも work around であり、setTimeout を使わない設計がいいんじゃないかとは思いますが（しつこいですね）。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
ajaxを実行する前にボタンを押せなくするのはどうでしょうか？
$("#aqua").prop("disabled", true);投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
結果的に以下のようなコードになりましたので一応載せておきます。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.box1{
width: 150px;
height: 150px;
background-color: aqua;
margin-top: 20px;
}
.box2{
width: 150px;
height: 150px;
background-color: red;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<br>
<input type="text" id="text" oninput="red(this)">
<input type="button" id="aqua" value="青を表示">
<div class="box1"></div>
<div class="box2"></div>
</body>
<script>
// ボタン押下時、「青」に変える
var timer = false;
$("#aqua").click(function(){
if (timer !== false) {
clearTimeout(timer);
}
$('div.box1').show();
$('div.box2').hide();
$('#text').val('');
});
// 「赤」に変える。oninput処理を何度も走らせないため１秒後に実行
function red(_this){
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function(){
$.ajax({
url: "http://localhost/cakephp3/Sample/blue",
}).done(function(){
var str = $('#text').val(); //今回増やした部分
if(str !== ''){
$('div.box1').hide();
$('div.box2').show();
console.log(_this.value);
}
}).fail(function(){
console.log('error!!!');
});
},500);
}
// ボタンを押した時、常に「青」になるようにしたい。
// 現状テキストボックス入力後、すぐにボタンを押すと最後「赤」になる
// 秒数やsetTimeoutの処理は維持し、ただボタン押下時は常に青になるようにしたい
</script>
</html>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2016/04/23 11:59
できました！
ajaxの成功時条件分岐をいれると、期待通りに動きにすることができました！
実際の現場のコードでもしていたのですが、
Ajaxが実行される前のテキストボックスの値で条件分岐をかけていました。
そうすると今回のようなときに齟齬が生じ、結果として不具合が発生するのですね。
自身0.5秒遅延させる仕様でsetTimeoutしかやり方が思いつかなかったため、その方法でしています。もし他の方法でスジが違わない方法があれば全然それを使います。
2016/04/23 12:48
よろしくお願い致します。
https://teratail.com/questions/33150