指定した時間が経過した後に、何か操作を加えたいと思うことはないでしょうか。
setTimeoutメソッドを利用すると、それが可能です。
例えとして、８０以上の数値を入力して結果ボタンを押すと、３秒後に合格と表示されるコードを作ります。
setTimeoutメソッドは、setTimeout(関数、時間）という形で指定します。
第一引数の関数の部分には、下記のように、アロー関数という形で代入、第二引数の3000を入力しました。
setTimeout(()=>{
box.textContent=`${score}点、${judge}`;
},3000);
scoreは、入力した得点、judgeは合格または不合格です。
８０をボックスに入力し、結果ボタンを押してみると、３秒後に
８０点、合格
と表示されます。
一方、７５とボックスに入力し、結果ボタンを押すと、
７５点、不合格と表示されます。
厳格に設定した通りに表示されます。
【入力ボックスを含めた全体のJavaScript】
const buttonResult=document.getElementById('button-result');
const input=document.getElementById('score');
const box=document.getElementById('box');
const calculateResult=( )=>{
let judge;
const score=input.value;
if(score>=80){
judge='合格';
}else{
judge='不合格';
}
return judge;
};
buttonResult.addEventListner('click',( )=>{
const score=input.value;
const judge=calculateReslult( );
setTimeout(( )=>{
box.textContent=`${score}点、${judge}`;
},3000);
});
関数スコープ内で宣言した変数
calcutateResult関数内でjudge変数を宣言し、８０点以上の場合に合格、それ以外は不合格としています。
クリックイベントコールバック関数内で宣言した変数
結果ボタンをクリックした時の処理が後半部分です。
クリックイベントコールバック関数内で宣言された変数scoreとjudgeは、calculateResult関数内と同じ名前ですが、異なるスコープ内で定義されているため、別々のものとして扱われると考えていいでしょう。
【HTML】
<body>
得点<input type="text" id="score">
<div>
<button type="button" id="button-result">結果</button>
</div>
<div id="box"></div>
</body>
リスキリング、何かスキルを身に付けたいという方は、フロントエンド学習が始めやすいため参考にご覧ください。
