ホームページ >ウェブフロントエンド >jsチュートリアル >非同期操作の Promise と「setTimeout」を統合するにはどうすればよいですか?

非同期操作の Promise と「setTimeout」を統合するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-26 06:53:101023ブラウズ

How Can I Integrate `setTimeout` with Promises for Asynchronous Operations?

setTimeout と Promises のブリッジング

非同期プログラミングの世界では、Promise はイベントの非同期フローを管理する手段として最高の地位を占めています。 。ただし、あらゆる状況で Promise を採用することは、特に、Promise ベースのインターフェイスが本質的に欠落している setTimeout のような関数を扱う場合には、困難を伴う可能性があります。

setTimeout を Promise ベースのレルムにシームレスに統合するには、次のアプローチを検討してください。

基本的な約束: Delay

setTimeout から Promise を作成する基本を調べたいとします。単純な実装は次のようになります。

function setTimeoutPromise(delay) {
    return new Promise((resolve) => {
        setTimeout(resolve, delay);
    });
}

ここでは、Promise コンストラクターを利用して、setTimeout の遅延実行をカプセル化する Promise を初期化します。

値による拡張: 渡しa 解像度値

解決値を渡すことを約束することは、setTimeout の追加引数をサポートする環境でも同様に簡単です。これを実現する方法は次のとおりです。

function setTimeoutValuePromise(delay, value) {
    return new Promise((resolve) => {
        setTimeout(resolve, delay, value); // Ensure that 'delay' comes before 'value' in argument order
    });
}

キャンセル可能性: Promise に対する制御の導入

Promise は本質的に不変ですが、実装を拡張して提供することができます。キャンセル可能な遅延を導入することで柔軟性が向上します。 Promise をオブジェクトにラップすることで、必要に応じてタイムアウトをキャンセルできるようになります。

function cancellableSetTimeout(delay, value) {
    let timer;
    let reject;
    const promise = new Promise((resolve, _reject) => {
        reject = _reject;
        timer = setTimeout(() => resolve(value), delay);
    });
    return {
        promise,
        cancel() {
            if (timer) {
                clearTimeout(timer);
                timer = null;
                reject();
                reject = null;
            }
        },
    };
}

この実装により、遅延のキャンセルが可能になり、Promise だけでは本質的に利用できないレベルの制御が提供されます。

ライブ デモンストレーション: Promise を注入したショーケースsetTimeout

実際の Promise の力を確認するには、次の対話型の例を検討してください。

// Create a cancellable setTimeout
const cancellableTimeout = cancellableSetTimeout(100, "Message from timeout");

// Handle the promise resolution
cancellableTimeout.promise
    .then((result) => console.log(result)) // Log the resolved value
    .catch(() => console.log("Timeout cancelled")); // Log if the timeout was cancelled

// Simulate cancellation
setTimeout(() => {
    cancellableTimeout.cancel(); // Cancel the timeout after a brief delay
}, 50);

このデモでは、Promise ベースのアプローチを紹介し、解決値とキャンセル機能。

以上が非同期操作の Promise と「setTimeout」を統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。