[JS]JavaScript中級教程(feat.コード鞍馬)-settimeout,setInterval

アプリケーション起動プロジェクトと、後で学習するTypeScript,Nest.jsのためにJavaScript文法で混同されている点がいくつかありますが、youtube coding anmaの講義でまとめたいと思います.
今回のキャンペーンではsettimeoutとsetIntervalについてご紹介しましょう

1.settimeout:一定時間後に関数を実行

// (1)
function fn() {
	console.log(3);  
}
setTimeout(fn, 3000);

// (2)
setTimeout(function(){
	console.log(3);
}, 3000);

の上のコードは、3秒後に実行されるコードです.

settimeoutは、2つのパラメータを受け入れます.(一定時間後に実行される関数と時間)

因数が必要な関数であれば、時間後に書くことができます.
(ex.settimeout(showName,3000,「Mike」)->関数、時間、パラメータ!)

2.clearTimeout：計画タスクのキャンセル

以上のようにsettimeoutはtIdを返し、cleartimeoutを使用するとスケジュールをキャンセルできます.3秒前にcleartimeoutが実行されるので、何も起こりません.

3.setInterval：一定時間ごとに1つの関数を実行する

function showName(name) {
	console.log(name);  
}
const tId = setInterval(showName, 3000, 'Mike');

上記のコードを実行すると、3秒ごとにMikeが出力されることを確認できます.
同様に、途中で中断する場合はclearIntervalを呼び出すことができます.

4.注意事項

setTimeout(function() {
	console.log(2);  
}, 0);
console.log(1);

上記のコードがあると仮定します.一見、settimeoutの時間は0秒なので順番に進むはずですが、そうではありません.
これは、現在実行中のスクリプトが終了するとスケジュールが実行されるためです.
また、すぐに0に実行するのではなく、ブラウザで4 msの待機時間があるため、次の操作が実行されます.

5.例

let num = 0;

function showTime() {
	console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다. `};
    if (num > 5) {
		clearInterval(tId);
    }
}
const tId = setInterval(showTime, 1000);

上記の例ではconsoleに5秒しか出力されません.時間を制限する場合は、if文としてclearIntervalを使用します.次の例を示します.
(このポスターの内容はyoutube coding anmaのビデオを参考にしています)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4