JavaScript は、Web アプリを動的かつインタラクティブにするのに優れていますが、単独ではうまく処理できないことが 1 つあります。それは、頻繁なイベントです。ウィンドウのサイズ変更、スクロール、検索ボックスへの入力などについて考えてみましょう。適切に管理しないと、これらがアプリにイベント トリガーを大量に送り込み、動作が遅くなり、ユーザー エクスペリエンスが遅くなる可能性があります。そこで、デバウンシングとスロットルの出番です。これらのテクニックは、特定の関数が実行される頻度を制御し、アプリの高速性と応答性を維持するのに役立ちます。

この記事では、デバウンシングとスロットリングについて詳しく説明し、いつそれらを使用するかを示し、実際の例を示してそれらの動作を確認します。これらの重要な JavaScript パフォーマンス最適化テクニックについて詳しく見ていきましょう!

デバウンスとは何ですか?

仕組み

デバウンスとは、相手が話し終わるのを待ってから返信を始めるようなものだと考えてください。誰かがあなたの話を中断し続ける会話に参加したことがあるなら、アイデアがわかるでしょう。 デバウンシング の重要な概念は、最後にイベントがトリガーされてから指定された時間が経過するまで関数の実行を遅らせることです。

簡単に言えば、イベント (ユーザーの入力など) が急速に発生し続ける場合、デバウンスにより、ユーザーが一定期間停止した後にのみ関連する機能 (検索クエリなど) が実行されるようになります。

デバウンスを使用する場合

頻繁なユーザー入力によって引き起こされる過度の関数呼び出しを制限したい場合は、デバウンスを使用する必要があります。典型的な例は、検索ボックスがあり、ユーザーが入力するたびに API 呼び出しを行う場合です。デバウンスを行わないと、キーストロークごとに API が呼び出され、サーバーに不要な負荷がかかる可能性があります。デバウンスを使用すると、ユーザーが入力をやめたときにのみ API が呼び出されます。

コードでのデバウンス

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Usage
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('API call made!');
}, 300)); // Only executes 300ms after the last keystroke

この例では、デバウンス関数により、ユーザーが入力を停止してから 300 ミリ秒後にのみ API 呼び出しが行われるようにしています。

スロットリングとは何ですか?

デバウンスとの違い

それでは、スロットルについて話しましょう。 debounceing がおしゃべりが消えるまで応答を待機している場合、throttleling は、待機している車の数に関係なく、数秒ごとに 1 台の車しか通過させない交通警官のようなものです。これにより、イベントが繰り返しトリガーされた場合でも、関数は設定された期間ごとに最大 1 回呼び出されることが保証されます。

スロットリングを使用する場合

時間の経過とともに一貫した実行を保証する必要がある場合は、スロットルを使用するとよいでしょう。たとえば、ユーザーがページを下にスクロールすると、スクロール イベントが 1 秒あたり数十回トリガーされることがあります。スロットリングを行わないと、アプリがこれらすべてのイベントを処理しようとするため、速度が低下する可能性があります。スロットルにより、スクロール イベント ハンドラーの実行頻度が制限され、パフォーマンスが向上します。

コードでのスロットリング

関数スロットル(関数、制限) { lastCall = 0 にします。 return function(...args) { const now = Date.now(); if (現在 - lastCall >= 制限) { lastCall = 今; func.apply(this, args); } }; } // 使用法 window.addEventListener('scroll', throttle(() => { console.log('スクロールイベント!'); }, 1000)); // 最大 1000 ミリ秒ごとに実行されます

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

ここでは、スロットル関数により、スクロール イベント ハンドラーが 1000 ミリ秒ごとに 1 回のみ実行されるようにし、アプリが過負荷にならないようにします。

実際の例

これらのテクニックをより実践的な文脈に落とし込んでみましょう。ユーザーが検索ボックスに入力する

React アプリ を構築しているとします。入力イベントをデバウンスして、サーバーに API 呼び出しが殺到するのを防ぐことができます。あるいは、ユーザーがページをどこまでスクロールしたかを追跡している場合は、スロットリングを使用してパフォーマンスを最適化できます。

React でのデバウンス

import { useState } から 'react'; 関数 SearchComponent() { const [クエリ、setQuery] = useState(''); const handleSearch = debounce((値) => { // 値を指定した API 呼び出し console.log('検索中:', 値); }, 300); 戻る （ { setQuery(e.target.value); handleSearch(e.target.value); }} /> ); }

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

スクロールイベントの調整

import { useEffect } から 'react'; 関数 ScrollTracker() { useEffect(() => { const handleScroll = throttle(() => { console.log('スクロール中...'); }, 1000); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }、[]); return ; }

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

パフォーマンス最適化のベストプラクティス

デバウンスとスロットリング: いつ選択するか

これが簡単な経験則です:

デバウンスは、ユーザーが何かをするのをやめるまで待ちたい場合に最適です。たとえば、検索バーに「
• 」と入力する場合です。
スロットリングは、長期間にわたって一貫した定期的な実行を確保したい場合に最適に機能します。ウィンドウのスクロールやサイズ変更に最適です。

どのような種類のイベントを扱っているか、そしてそれがどれくらいの頻度でトリガーされるのかがわかれば、その仕事に適した手法を選択できます。

結論

JavaScript での頻繁なイベントの制御はパフォーマンスの最適化に不可欠であり、

デバウンスとスロットルの両方が強力なソリューションを提供します。それぞれをいつ使用するかを理解することで、検索入力の処理、ウィンドウのサイズ変更、スクロール イベントの管理など、Web アプリケーションをよりスムーズで応答性の高いものにすることができます。

次に、アプリがあまりにも多くのイベントによって行き詰まっていることに気付いたら、次のように自問してください:

デバウンスする必要があるのか​​、それともスロットルするべきでしょうか?きっと喜んでいただけるはずです!

試してみる準備はできましたか? 次回プロジェクトに取り組むときに、これらのテクニックを試してみてください。すべてがどれほどスムーズになったかに驚くでしょう!