Q&A
質問文のコードを [編集] してmarkdown記法で書いてください。
https://docs.github.com/ja/github/writing-on-github/creating-and-highlighting-code-blocks
javascriptタイマー処理clearTimeoutとsetTimeoutについて
質問内容に目を通してくださいありがとうございます。
（例）javascriptの勉強中、タイマー処理を利用し文字列を点滅させる操作をもつページを
作りたいのですがテキストの例に記載されてある次の構文が分かりません。
私はこのfunction（disp()）内のタイマー処理を以下のようにとらえているのですが（(cleartimeout)抜きで）
１・getElementでmessageを所得
２・条件判定で表示しているときはmessageのinnerHTMLを'それはよかったです'に変換、表示していないときは非表示設定にする を実行
３・repeatでsettimeoutにより関数自体を呼び出し実行
この解釈であるとif (repeat){cleartimeout(repeat);}の記述の意図がつかめません。
なぜ同じ関数内に逆の操作を持つsettimeoutとcleartimeoutを設定しているのでしょうか？
自分の解釈で誤っている部分はありますか
回答1件
0
あまりいいサンプルではありませんね
処理的にはsetTimeoutで自分を繰り返し呼び出しています
こうするならsetIntervalなどのほうが直感的でわかりやすいでしょう。
グローバルに用意したフラグisdispでon/offして0.5秒毎に表示を
表示しているだけです
clearTimeout(repeat)しているのは、クリックボタンを複数回押したときに
処理が何重にも実行されるのを防いでいます
投稿2021/02/19 02:37
総合スコア116694
処理的には点滅はcssに任せたほうがわかりやすいかも
<style>
.active{animation: flash 1s linear infinite;}
@keyframes flash {
0%,50% {opacity: 1;}
50.1%,100% {opacity: 0;}
}
</style>
<p id ="message">Javascriptは面白いですか</p>
<input type ="button" value="クリック" onclick="disp()"/>
<script>
const disp = ()=>{
Object.assign(document.querySelector('#message'),{
textContent:"それはよかったです",
className:'active',
});
}
</script>
あなたの回答
tips
プレビュー
