Jsで次の工程に進むのに一定時間待つみたいな

質問

let sakusei = document.getElementById('b_change_room');

let change = document.getElementById('b_change_room_info');

let name = document.getElementById('i_room_name');

let element = document.getElementById('comment');

let a = new Event('mousedown');

let e = new Event('mouseup');

let target = document.getElementById('b_send');

for (let step = 0; step < 100; step++) {

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "トイレ清掃中　　　　"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "イレ清掃中　　　　ト"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "レ清掃中　　　　トイ"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "清掃中　　　　トイレ"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "掃中　　　　トイレ清"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "中　　　　トイレ清掃"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "　　　　トイレ清掃中"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "　　　トイレ清掃中"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "　　トイレ清掃中"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "　トイレ清掃中"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

change.dispatchEvent(a);

change.dispatchEvent(e);

name.value = "トイレ清掃中　　　　"

sakusei.dispatchEvent(a);

sakusei.dispatchEvent(e);

};

動くのが早すぎて困ってます。
一回(changeからsakuseiまで)ごとに0.5秒待つみたいなことはどうやれば出来ますか?
回答よろしくお願いします。

回答No.4

retorofan

補足を読むのが遅くなって申し訳ございません。
＞10回繰り返す
それなら、下記のように改修したら良いでしょう。

//エレメント
let sakusei = document.getElementById('b_change_room');
let change = document.getElementById('b_change_room_info');
let name = document.getElementById('i_room_name');

//イベント発火
let a = new Event('mousedown');
let e = new Event('mouseup');

//配列変数
let names = ["トイレ清掃中　　　　", "イレ清掃中　　　　ト", "レ清掃中　　　　トイ", "清掃中　　　　トイレ", "掃中　　　　トイレ清", "中　　　　トイレ清掃", "　　　　トイレ清掃中", "　　　トイレ清掃中", "　　トイレ清掃中", "　トイレ清掃中", "トイレ清掃中　　　　"];

//等間隔実行関数
function fixed_interval(step, repeat) {
if (step >= names.length) {
step = 0;
repeat--;
if (repeat <= 0) return;
}

change.dispatchEvent(a);
change.dispatchEvent(e);
name.value = names[step];
sakusei.dispatchEvent(a);
sakusei.dispatchEvent(e);

setTimeout(() => fixed_interval(step + 1, repeat), 500);
}

fixed_interval(0, 10); //回数パラメータを10にセット

回数パラメータが0になるまで、
つまり、10回
fixed_interval関数が再帰的に呼び出されます。

回答No.3

retorofan

＞動くのが早すぎて困ってます。
確かに、そうなるべくしてそうなるようなコーディングです。
しかも冗長の嫌いがあります。（無駄アリ、長ったらしい）
それらの点を解消したのが、次のコードです。

//エレメント
let sakusei = document.getElementById('b_change_room');
let change = document.getElementById('b_change_room_info');
let name = document.getElementById('i_room_name');

//イベント発火
let a = new Event('mousedown');
let e = new Event('mouseup');

//配列変数
let names = ["トイレ清掃中　　　　", "イレ清掃中　　　　ト", "レ清掃中　　　　トイ", "清掃中　　　　トイレ", "掃中　　　　トイレ清", "中　　　　トイレ清掃", "　　　　トイレ清掃中", "　　　トイレ清掃中", "　　トイレ清掃中", "　トイレ清掃中", "トイレ清掃中　　　　"];

//等間隔実行関数
function fixed_interval(step) {
if (step >= names.length) return;

change.dispatchEvent(a);
change.dispatchEvent(e);
name.value = names[step];
sakusei.dispatchEvent(a);
sakusei.dispatchEvent(e);

setTimeout(() => fixed_interval(step + 1), 500);
}

fixed_interval(0);

以上、お試しになってみてください。

補足

これを繰り返すみたいな事ってできますか？
実行したら一周で終わってしまったのでワガママですが10回繰り返すみたいな事をできるようにしてほしいです。
すみません。🙇

回答No.2

t_hirai

もしくはブレイクポイントでデバッグするのが良いと思います。

回答No.1

t_hirai

setInterval あたりだと思います。