[TIL]モダンJavaScript Deep Diveタイマ
27438 ワード
タイマ
コールスケジューリング
関数を明示的に呼び出すと、関数はすぐに実行されます.関数を明示的に呼び出さず、所定の関数呼び出しが一定時間後に呼び出される場合は、タイマ関数が使用されます.これをコールスケジューリングと呼びます.
JavaScriptには、タイマを生成するためのタイマ関数settimeoutと、タイマを削除するためのcleartimeoutとclearIntervalがあります.タイマ関数はホストオブジェクトです.
タイマ関数settimeoutとsetIntervalは、コールバック関数を呼び出すためにタイマを生成します.すなわち、タイマ関数settimeoutおよびsetIntervalによって生成されたタイマが期限切れになった場合、コールバック関数が呼び出される.
settimeout関数で生成されたタイマは1回のみ実行され、setInterval関数で生成されたタイマは繰り返し操作されます.すなわち、settimeout関数のコールバック関数は、タイマが期限切れになったときに1回のみ呼び出され、setInterval関数のコールバック関数は、タイマが期限切れになったときに1回繰り返し呼び出される.
JavaScriptエンジンには実行コンテキストスタックが1つしかないため、2つ以上のタスクを同時に実行することはできません.つまり、JavaScriptエンジンは単一スレッドで動作します.したがって、settimeoutおよびsetIntervalは非同期処理で動作する.
タイマ関数
setTimeout / clearTimeout
settimeout関数は、2番目のパラメータが伝達される時間(ms,1/1000秒)で1回の動作を行うタイマを生成する.その後、タイマが期限切れになると、最初のパラメータとして渡されるコールバック関数が呼び出されます.すなわち、settimeout関数のコールバック関数は、2番目のパラメータが受信された時間後に1回のみ実行されるようにスケジューリングされる.
const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
setTimeout(() => console.log('Hi!'), 1000);
// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
// 이때 콜백 함수에 'Lee'가 인수로 전달된다.
setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee');
// 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다.
setTimeout(() => console.log('Hello!'));settimeout関数から返されるタイマidをclaerTimeout関数の引数として使用することで、タイマをキャンセルできます.つまり、cleartimeout関数は呼び出しスケジュールをキャンセルします.
// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
// setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timerId = setTimeout(() => console.log('Hi!'), 1000);
// setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소한다.
// 타이머가 취소되면 setTimeout 함수의 콜백 함수가 실행되지 않는다.
clearTimeout(timerId);setInterval / clearInterval
setInterval関数は、2番目の引数で伝達される時間で動作を繰り返すタイマを生成します.タイマが期限切れになるたびに、最初のパラメータが渡すコールバック数が繰り返されます.これは、タイマーがキャンセルされるまで続きます.すなわち、setInterval関数のコールバック関数は、2番目の引数伝達時間内に呼び出しを繰り返し実行するようにスケジューリングされる.setInterval関数に渡すパラメータはsetTimeout関数と同じです.
const timerId = setInterval(func|code[, delay, param1, param2, ...]);let count = 1;
// 1초(1000ms) 후 타이머가 만료될 때마다 콜백 함수가 호출된다.
// setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timeoutId = setInterval(() => {
console.log(count); // 1 2 3 4 5
// count가 5이면 setInterval 함수가 반환한 타이머 id를 clearInterval 함수의 인수로 전달하여
// 타이머를 취소한다. 타이머가 취소되면 setInterval 함수의 콜백 함수가 실행되지 않는다.
if (count++ === 5) clearInterval(timeoutId);
}, 1000);後退と制限
スクロール、サイズ変更、入力、mousemoveなどのイベントが短時間間隔で連続して発生します.これらのイベントにバインドされたイベントハンドラが過度に呼び出され、パフォーマンスに問題が発生する可能性があります.ジッタおよび制限は、短時間間隔で連続的に発生するイベントをグループ化することによって、イベントハンドラの過度な呼び出しを防止するプログラミング技術である.
ジッタと制限は、イベントの処理に役立ちます.タイマ関数は、ジッタと制限の実装に使用されます.
返品
イベントが短時間間隔で連続的に発生すると、デバッガはイベントハンドラを呼び出さず、一定時間後にイベントハンドラを呼び出すだけです.すなわち、disbounceは、短時間間隔で発生したイベントをグループ化し、最後にイベントハンドラを1回だけ呼び出す.
たとえば、テキスト入力フィールドでは、入力イベントが短い時間間隔で連続的に発生する場合があります.
<!DOCTYPE html>
<html>
<body>
<input type="text" />
<div class="msg"></div>
<script>
const $input = document.querySelector("input");
const $msg = document.querySelector(".msg");
const debounce = (callback, delay) => {
let timerId;
// debounce 함수는 timerId를 기억하는 클로저를 반환한다.
return (event) => {
// delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다.
// 따라서 delay보다 짧은 간격으로 이벤트가 발생하면 callback은 호출되지 않는다.
if (timerId) clearTimeout(timerId);
timerId = setTimeout(callback, delay, event);
};
};
// debounce 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다.
// 300ms보다 짧은 간격으로 input 이벤트가 발생하면 debounce 함수의 콜백 함수는
// 호출되지 않다가 300ms 동안 input 이벤트가 더 이상 발생하면 한 번만 호출된다.
$input.oninput = debounce((e) => {
$msg.textContent = e.target.value;
}, 300);
</script>
</body>
</html>
ユーザーがテキスト入力フィールドに値を入力するたびにinputイベントが連続して発生します.Input Event Handlerがユーザが入力フィールドに入力した値でAjax要求などの煩雑な処理を実行すると,ユーザが入力を完了していなくてもAjax要求が送信される.これはサーバに負担をかける不要な処理であるため,ユーザが入力を完了した場合には,Ajaxリクエストを1回だけ送信することが望ましい.
ユーザーが入力を完了したかどうかは不明ですが、テキスト入力フィールドに値が入力されていない場合は、入力が完了したとみなされます.このため、debonse関数が返す関数は、イベントが発生する間隔がdebonse関数の2番目のパラメータ(delay)より短い場合に前のタイマをキャンセルし、新しいタイマを再設定します.したがって、イベントがdelayよりも短い間隔で連続的に発生すると、debonse関数の最初のパラメータとして渡されるコールバック関数は呼び出されず、delay中に入力イベントが発生しなくなった場合、一度だけ呼び出されます.
disbounceは、resizeイベントを処理するか、入力要素に入力された値を使用してajax要求の入力フィールドがUIを自動的に完了し、ボタンの重複クリックを防止する処理に使用できます.
制限
スロットル(throttle)を使用すると、イベントが短時間間隔で連続的に発生しても、イベントハンドラが一定時間間隔で最大1回呼び出されます.すなわち、短い間隔で連続的に発生するイベントをグループ化し、イベントハンドラを一定期間呼び出すための呼び出しサイクルを作成します.
たとえば、スクロールイベントが短い時間間隔で連続的に発生する場合.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
background-color: rebeccapurple;
overflow: scroll;
}
.content {
width: 300px;
height: 1000vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
<div>
일반 이벤트 핸들러가 scroll 이벤트를 처리한 횟수:
<span class="normal-count">0</span>
</div>
<div>
스로틀 이벤트 핸들러가 scroll 이벤트를 처리한 횟수:
<span class="throttle-count">0</span>
</div>
<script>
const $container = document.querySelector(".container");
const $normalCount = document.querySelector(".normal-count");
const $throttleCount = document.querySelector(".throttle-count");
const throttle = (callback, delay) => {
let timerId;
// throttle 함수는 timerId를 기억하는 클로저를 반환한다.
return (event) => {
// delay가 경과하기 이전에 이벤트가 발생하면 아무것도 하지 않다가
// delay가 경과했을 때 이벤트가 발생하면 새로운 타이머를 재설정한다.
// 따라서 delay 간격으로 callback이 호출된다.
if (timerId) return;
timerId = setTimeout(
() => {
callback(event);
timerId = null;
},
delay,
event
);
};
};
let normalCount = 0;
$container.addEventListener("scroll", () => {
$normalCount.textContent = ++normalCount;
});
let throttleCount = 0;
// throttle 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다.
$container.addEventListener(
"scroll",
throttle(() => {
$throttleCount.textContent = ++throttleCount;
}, 1000)
);
</script>
</body>
</html>
スクロールイベントは、ユーザーがスクロールするときに短時間間隔で連続して発生します.このような短い時間間隔で連続的に発生するイベントを呼び出す過剰なイベントハンドラを防止するために、throttle関数はイベントをグループ化し、イベントハンドラを一定時間呼び出すための呼び出しサイクルを作成します.
throttle関数が返す関数は、throttle関数の2番目のパラメータに渡される時間(delay)まで、イベントが発生した場合は何もしません.遅延が発生した場合はコールバック関数を呼び出し、新しいタイマを再設定します.したがって、遅延時間間隔でコールバック関数が呼び出される.
制限は、スクロールイベントの処理または無限スクロールUIの実装に使用することができる.
Reference
この問題について([TIL]モダンJavaScript Deep Diveタイマ), 我々は、より多くの情報をここで見つけました https://velog.io/@hang_kem_0531/TIL-모던-자바스크립트-Deep-Dive-타이머テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol