addClassで色を変更して、しばらくsleepさせてからremoveClassで元に戻したい。

Question

前提・実現したいこと

16マスの色を一定時間ごとにランダムに変えて、戻してを繰り返したいです。

発生している問題・エラーメッセージ

addClassで色を変更して、しばらくsleepさせてからremoveClassで元に戻そうかと思ったのですが、
removeが効かず、ずっと色がつき続けています。

該当のソースコード

JavaScript

function roulette() {
//ランダムに1～16の数字を出す
var rand = Math.floor(Math.random() * 16) + 1;
//出た数字のマスの色を変える。
$('#number' + rand).addClass('back_yellow');
//遅延させる
Thread.sleep(250);
//出た数字のマスの色を戻す
$('#number' + rand).removeClass('back_yellow');
}

試したこと

補足情報（FW/ツールのバージョンなど）

。

Comments

[m.ts10806]

setTimeout()とかは試してませんか？

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください

[miy-mei]

コメントありがとうございます。

setTimeout()は使っておりません。（今初めて知りました）
調べてみます！

setInterval(roulette, 500);
でfunction roulette() を繰り返してるんですが、
延々マスが黄色くなるだけで色が戻らない状況です。

[m.ts10806]

質問は編集できますので。

Answer 1

こんにちは、miy-meiさん

ご質問拝見しました。
まず、記載されているコードですが、今回ご質問されている言語がJavaScriptなのであれば、JavaScriptにはThread.sleepメソッドはありません（Thread.sleepは、Javaにあるメソッドのようなので、Javaの記事を参考にされたのでしょうか？JavaとJavaScriptは全く異なる言語であるので、念の為）。
JavaScriptでは、setTimeoutというメソッドが遅延処理を行うメソッドになります。

setTimeout

上記メソッドを利用して書き直すとしたら、以下の様になるかと思います。

function roulette() {
  //ランダムに1～16の数字を出す
  var rand = Math.floor(Math.random() * 16) + 1;

  //ターゲットのjQueryオブジェクトを変数に格納しておく
  var $num = $('#number' + rand);

  //出た数字のマスの色を変える。
  $num.addClass('back_yellow');

  //遅延させる
  setTimeout(function () {
    //出た数字のマスの色を戻す
    $num.removeClass('back_yellow');
  }, 250);
}

以上、参考になれば、幸いです。

Comments

[miy-mei]

ありがとうございます！
何となくイメージがつきました！
試してみます！！

[miy-mei]

おかげさまでできました！
誠にありがとうございますm(__)m

Answer 2

//遅延させる
Thread.sleep(250);

一般的なブラウザ環境では、Thread.sleepという関数は存在しません。何かで用意しているのでしょうか。

Comments

[miy-mei]

そうなんですね。
遅延させるのにsleep()というのを見つけて、使ってみたところ変わらなかったので、
検索していたらThread.sleepというのが出てきたので入れてみたんですが……。
私の調べ方に問題があったと思います。

[miy-mei]

すいませんphpと混ざっておりました。JavaScriptにはないですね。