JavaScript および React での Debounce の使用に関する詳細な説明

debounce は JavaScript と React のテクニックで、関数の繰り返しをすぐに停止し、指定された時間の後に関数を実行します。これは主に、特にユーザーが入力やスクロールなどのタスクを実行するときのパフォーマンスを向上させるために使用されます。

デバウンスはどのように機能しますか?

デバウンスは基本的にタイマーを作成し、指定された時間内に同じ関数が繰り返しトリガーされると、最後の関数を実行する前に残りの関数をキャンセルします。たとえば、検索ボックスに入力中にサーバーに API 呼び出しを行うには、キーを押すたびにサーバーを呼び出すのではなく、入力が完了してから指定した時間が経過した後に API 呼び出しを行うことができます。これにより、サーバーの負荷が軽減され、アプリケーションのパフォーマンスが向上します。

JavaScript でデバウンスを作成するにはどうすればよいですか?

デバウンス関数は非常に簡単に作成できます:

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

上のデバウンス関数は次のことを行います:

• func: デバウンスされる関数。
• 遅延: 関数が実行されるまでの待機時間。

例

ユーザーが入力を終えたときに、検索ボックスへの API 呼び出しを行うとします。

function handleSearch(query) {
    console.log("Searching for:", query);
    // এখানে API কল হবে
}

const debouncedSearch = debounce(handleSearch, 500); // 500ms delay

// Input field এ টাইপ করার সাথে সাথে debounce ফাংশন কাজ করবে
document.getElementById('searchInput').addEventListener('input', function(event) {
    debouncedSearch(event.target.value);
});

ここでは、debouncedSearch 関数は 500 ミリ秒待ってから関数を呼び出します。これにより、複数のキーが押されてもサーバーに複数のリクエストが送信されなくなります。

React でデバウンスを使用するにはどうすればよいですか?

React アプリケーションでは、通常、デバウンス関数は useEffect フックとともに使用されます。例:

import React, { useState, useEffect } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');
    const [debouncedQuery, setDebouncedQuery] = useState(query);

    // useEffect to handle debounced query update
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedQuery(query);
        }, 500); // 500ms delay

        // Cleanup the timeout when query changes
        return () => {
            clearTimeout(timer);
        };
    }, [query]);

    useEffect(() => {
        if (debouncedQuery) {
            console.log("Searching for:", debouncedQuery);
            // এখানে API কল হবে
        }
    }, [debouncedQuery]);

    return (
        <input 
            type="text" 
            value={query}
            onChange={(e) => setQuery(e.target.value)} 
            placeholder="Search..."
        />
    );
}

export default SearchComponent;

この例では、ユーザーが入力するとクエリの状態が更新されます。ただし、debouncedQuery の状態は、ユーザーが入力をやめた 500 ミリ秒後にのみ更新されます。その結果、API 呼び出しは複数回ではなく、必要な場合にのみ行われます。

結論

Debounce テクニックは、JavaScript と React のパフォーマンスを向上させる効果的な方法です。これは、検索エンジン、フォーム検証、スクロール イベントにとって特に重要であり、イベントへの不要な複数の呼び出しを回避する必要があります。

以上がJavaScript および React での Debounce の使用に関する詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。