質問: 前回の投稿の続きになります。 setTimeoutとボタン押下の処理がうまくいかない ajaxがうまくいかない 現在cakePHP3,PHP,HTML(ctp),JavaScript(jQuery)を使ってアプリ開発をしています。 テキストボックスに入力すると、その0.5秒後に赤になり、**ボタン押下時に必ずBoxが青になる**というものです。 ボタン押下時はテキストボックスをクリアしているので、**テキストボックスが空の時は必ず青になる**想定です。 画面 テキストボックス入力時↓ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/1a772dbddf3ed322ce2759e14a991934.png) 画面 ボタン押下時↓ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/bbcad287747c53888ebecf5208ea2e9e.png) 前回の投稿では、**「青を表示」ボタン押下時にclearTimeoutをすることで、ボタン押下時は必ず青にすることができました。** ただ今回**Ajax処理を導入したことで、ときどきボタン押下後に赤になるケースが出てきました。** テキストボックス入力後、0.5秒経つギリギリ前のタイミングでボタン押下するとなりやすいです。 質問内容としては、 **この赤になるケースの原因を解決し、ボタン押下時に必ず青にするにはどうしたらいいか知りたい。** というものです。 コードは以下になります。 settimeout.ctp ``` ``` SampleController.php ``` autoRender =false; } } ``` ボタン押下時に`clearTimeout(timer);`で赤にする`setTimeout`の処理を止めているつもりなのですが、 Ajaxが非同期だからかなのか原因は明確にはわかっていませんが、赤にする処理も走ってしまうことがあるようです。 `Ajax`も`setTimeout`処理内に書いているので、ボタン押下時の`clearTimeout(timer);`でAjax処理も防げると思っていたのですが。 もしこの問題の原因や解決策がわかる方がいらっしゃいましたら教えていただけるとありがたいです。
回答: > > oninput処理を何度も走らせないため > > > という目的のために `setTimeout` を使っていること自体が、ちょっとスジがよくないな、と思うのですが、「入力があって 0.5 秒後に ajax のリクエストを飛ばしたい」というの目的なのであれば、それはそれで仕方がありませんが、それは「スジの悪さ」が実装から設計に移っただけかな、という気もします。 というのは余計なお世話ですかね。 さて、原因については、推察されているように、 1. タイマーの設定で ajax リクエストが飛ぶ 2. ボタン押下してタイマー解除して「青」にする 3. ajax のレスポンスが戻ってきて「赤」にする ということかと思います。「テキストボックスが空のときには青にしておく」ということをやりたいのであれば、とりあえずの work around として ajax のレスポンスが戻ってきたときにテキストボックスが空かどうか調べ、空じゃないときに「赤」にする、というのはどうでしょうか。私の感覚ではあくまでも work around であり、`setTimeout` を使わない設計がいいんじゃないかとは思いますが(しつこいですね)。