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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4528閲覧

setTimeoutとボタン押下の処理がうまくいかない

k499778

総合スコア599

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/04/20 14:32

編集2016/04/20 14:33

現在HTML,Javascript(jQuery)を使ってアプリを作っています。

ボタン押下時にBoxが青になり、テキストボックス入力すると赤になるというものです。

↓画面
イメージ説明

↓コード

html

1 2<!DOCTYPE html> 3<html> 4<head> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 6<style> 7.box1{ 8 width: 150px; 9 height: 150px; 10 background-color: aqua; 11 margin-top: 20px; 12} 13.box2{ 14 width: 150px; 15 height: 150px; 16 background-color: red; 17 margin-top: 20px; 18 display: none; 19} 20</style> 21</head> 22<body> 23<input type="text" oninput="red(this)"> 24<input type="button" id="aqua" value="青を表示"> 25<div class="box1"></div> 26<div class="box2"></div> 27</body> 28<script> 29// ボタン押下時、「青」に変える 30$("#aqua").click(function(){ 31 $('div.box1').show(); 32 $('div.box2').hide(); 33}); 34 35// 「赤」に変える。oninput処理を何度も走らせないため1秒後に実行 36var timer = false; 37function red(_this){ 38 if (timer !== false) { 39 clearTimeout(timer); 40 } 41 timer = setTimeout(function(){ 42 $('div.box1').hide(); 43 $('div.box2').show(); 44 console.log(_this.value); 45 },1000); 46} 47 48// ボタンを押した時、常に「青」になるようにしたい。 49// 現状テキストボックス入力後、すぐにボタンを押すと最後「赤」になる 50// 秒数やsetTimeoutの処理は維持し、ただボタン押下時は常に青になるようにしたい 51 52</script> 53</html> 54

入力中、何度もログをはかないようにするためsetTimeoutとclearTimeoutを使っています。

また仕様としては、ボタン押下時は常に「青」を表示するようにします。

しかし現状、テキスト入力後、すぐボタンを押すと「青→赤」となり、最終的に「赤」になってしまいます。

これを常に「青」にしたいです。
さらにsetTimeoutとclearTimeoutの遅延させる処理は残したまま、希望する動きを実現したいです。

そのやり方がもしわかる方がいれば教えていただきたいです。よろしくお願い致します。

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

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

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

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

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

guest

回答2

0

直接の回答にはなりませんが、input イベントが発生したときに何度も色を変える処理が走るのを回避したい、というのであれば、タイマーを使わない方法もあります。目的が「テキストが最後に変更されてから 1 秒後に色を変えたい」というのであれば的外れのアドバイスになりますが。
たとえば、jQuery のセレクタでフィルタを使えば(ここでは .on でクラスを指定) を使えば、「青のときだけ赤に変えて、何らかの処理も行う」というのもできるかな、と。

html

1<!DOCTYPE html> 2<html> 3<head> 4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 5<style> 6#box { 7 width: 150px; 8 height: 150px; 9 margin-top: 20px; 10} 11.off { 12 background-color: aqua; 13} 14.on { 15 background-color: red; 16} 17</style> 18</head> 19<body> 20<input type="text" id="text"></input> 21<input type="button" id="button" value="青を表示"> 22<div id="box"></div> 23</body> 24<script> 25 26$(function() { 27 var $text = $('#text'); 28 $('#box').addClass('off'); 29 $text.on('input', function() { 30 var $target = $('#box.off'); 31 // off 青)のときだけ on (赤) に 32 if ($target.size() > 0) { 33 $target.addClass('on').removeClass('off'); 34 console.log($text.val()); 35 } 36 }); 37 $('#button').on('click', function() { 38 // on (赤) のときだけ off (青) に 39 $('#box.on').addClass('off').removeClass('on'); 40 return false; 41 }); 42}); 43</script> 44</html>

ちなみに、text に入力するとき IME を使うと、確定前の入力でもバンバン input イベントが発生して「うざ」という場合の対処ですが、まともにやろうとすると結構大変みたいです。
http://qiita.com/hrdaya/items/29576a5e1a303c074249

投稿2016/04/20 16:08

unau

総合スコア2468

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

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

k499778

2016/04/20 16:47 編集

回答有り難うございます。 このように変更させる方法もあるのですね。 勉強になります!
guest

0

ベストアンサー

$("#aqua").click(function(){
if (timer !== false) {
clearTimeout(timer);
}
$('div.box1').show();
$('div.box2').hide();
});
って試してみました?

投稿2016/04/20 14:47

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

k499778

2016/04/20 14:52

回答ありがとうございます。 できました! これってどういうことですか? 実はあまりclearTimeout使ったことがなくて^^;
退会済みユーザー

退会済みユーザー

2016/04/20 15:01 編集

setTimeoutで非同期処理が走るので,文字を入力してから1秒発つ前にボタンを押すと青になる処理(つまり色が変わらない)が先に始まりその後青から赤になる処理が動いてしまうので,結果赤になったままになるというのがそのバグの原因です。なので1秒発つ前にボタンが押された場合はtimerに入ってる処理にキャンセル処理を入れる必要があったという話になります。
k499778

2016/04/20 15:03

返答ありがとうございます。 バグの原因までは理解していました。 ただそのtimerをキャンセルさせる発想と知識がありませんでした。 tkowさんのおかげで解決することができました。ありがとうございました。
k499778

2016/04/21 00:21 編集

cleartimeoutで動いていたタイマーをリセットする、キャンセルする、ことで oninputの遅れて動き出す処理も止めてしまうことができるのですね。おそらく。 oninput処理のタイマーがリセットされたことにより、その処理は走らず、青に変える動きだけが走り、バグを防ぐことができたということでしょうか。 改めて自分の中で咀嚼して本当に理解できてきたような気がします。ありがとうございました。
退会済みユーザー

退会済みユーザー

2016/04/21 15:24

そうですね。その理解で正しいですが,もう少し詳しく言うとjavascriptのキューはマルチスレッドではなくて,設定時間後にキューに処理を追加するモニター部だけ別スレッドにして実行するという方法で非同期処理を行っています。他の一般的なプログラミング言語の非同期処理では,実行するプログラムはマルチスレッド,つまり実行処理する処理系自体も複数に分散させて処理するのに対して,javascriptは実行予約だけは別スレッドにして実行するが,実際に予約された処理が実行される処理系は一つだけなので,他に処理が終わってないコードがあるとタイマーなどで登録された処理は順番待ちになります。つまり,タイマーで1秒後などと設定していても,処理の予約は1秒後になされるが,タイマーを呼び出した側の処理などが1秒以上かかると順番待ちになりその処理が終わるまでの時間分だけ遅延が起こります。ここまで理解しておくと,タイマーでトラブルことはないかと思います。 今回の例を交えると メイン処理終了(1秒以内)→予約処理→ボタン処理の順番で動くのが理想的ですが,キューの状態が メイン処理終了→ボタン処理→予約処理で登録されてしまう場合や,メイン処理終了(1秒以上の長い時間)→予約処理(1秒を超えた時間分の遅延)→ボタン処理、と登録されてしまうこともあるため使い方には十分気をつけてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問