LoginSignup
fallsnow
@fallsnow

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

javascriptで実行するまでの時間を追加する方法

Q&A

JavaScript

解決したいこと

ボタンを押すごとに実行するまでの時間を延長させること。

ボタン押下で、10秒後にアラートを表示させることはできましたが、
ボタンを押すたびにアラートを表示するまでの時間を10秒延長するにはどうするべきか分からず困っています。
どのような実装であれば、この機能を実現できるのかアドバイスをいただきたいです。

10秒後にアラートを表示させるソースコード

<!DOCTYPE html>
<html lang="ja">
<body>
    <button id="test1">クリック</button>
    <script>
        const BUTTON_CLICK_EVENT= document.getElementById('test1');
        BUTTON_CLICK_EVENT.addEventListener('click', () => {
            setTimeout('alert("ボタンがクリックされました")', 10000);
        });
    </script>
</body>
</html>
0

3Answer

mashuel
@mashuel

待ち時間を変数で管理し、関数実行ごとにを増やす

<!DOCTYPE html>
<html lang="ja">
<body>
	<button id="test1">click</button>
	<script>
		let wait=0;
		document.getElementById('test1').onclick=()=>setTimeout('alert("buttonがclickされました")',wait+=1e4);
	</script>
</body>
</html>
0Like

Comments

  1. @fallsnow

    Questioner

    分かりづらい書き方で申し訳ありません。
    ボタンを押下するごとにアラートを出し、アラートを表示するまでの時間を変えたいのではなく、
    アラートを表示したいのは1回のみで、ボタンを押下するごとにアラートが表示されるまでの時間を増やす処理の実装方法をご教授いただきたいです。

    例）
    ボタン押下→5秒後に再度ボタン押下→アラートが15秒後に表示される

SurferOnWww
@SurferOnWww

ボタン押下→5秒後に再度ボタン押下→アラートが15秒後に表示される

「5秒後に再度ボタン押下」のとき最初の「ボタン押下」の setTimeout をキャンセルして、そこから再度 setTimeout で 10 秒後に alert を表示したいということですか？

であれば、ボタンクリックの際、まず clearTimeout() メソッドを使って setTimeout をキャンセルしてはいかがですか？

0Like
local-nm
@local-nm

押すたびに時間が増加するということならこういう感じでいかがでしょうか？

<!DOCTYPE html>
<html lang="ja">

<body>
	<button id="test1">クリック</button>
	<script>
		const SEC = 1000;
		const BASE_TIME = 10 * SEC;

		const button = document.getElementById('test1');

		// タイマーIDを保持
		let timeoutId = null;
		// ボタンが押された時刻
		let startTime = null;
		// 初期値は基本時間
		let remainingTime = BASE_TIME;

		button.addEventListener('click', () => {
			const now = Date.now();

			// 2回目以降
			if (startTime) {
				// 前回の残り時間に新たな時間を加算
				remainingTime += (BASE_TIME - (now - startTime));
			}
			// ボタンを押した時点の時刻を記録
			startTime = now;
			// 既存タイマークリア
			if (timeoutId) {
				clearTimeout(timeoutId);
			}

			// 新しいタイマーを設定
			timeoutId = setTimeout(() => {
				alert("ボタンがクリックされました");
				// 初期化
				startTime = null;
				remainingTime = BASE_TIME;
			}, remainingTime);
		});
	</script>
</body>

</html>
0Like

Your answer might help someone💌

LoginSign Up