遅延非同期関数の待機（beforeunloadイベント）

Question

このコード例では、関数logout()はすべての非同期呼び出しを実行せず、終了するまで待機しません。代わりにページがアンロードされます。 beforeunloadイベントによってページがアンロードされます。私が試してみたい何

$(window).on('beforeunload', function(event) { 
    event.preventDefault(); 
    logout(); 
    return; 
}); 

はlogout()のいくつかの非同期呼び出しが完了した後にイベント関数が戻るということです。

編集：私の目標はではありませんこれにアラートを表示する！私はページがアンロードされる前にいくつかのコードを実行したいだけです。ログアウト関数には、終了する必要のある持続時間を持つajaxリクエストとjQueryアニメーションが含まれている可能性があります。

私はコールバックを試しましたが、これはコールバックに戻ってきたもので、目的の結果でないものは、イベント関数ではありません。

$(window).on('beforeunload', function(event) { 
    event.preventDefault(); 
    logout(function(x) { return; }); 
}); 

Answer 1

本当にクリーンなソリューションではありませんが、ログアウトの進行中にコードを強制的に待機させるようにsetTimeoutを試すことができます。

var timeToLogoutInMs = 500; 
setTimeout(function() { 
    // Nothing 
}, timeToLogoutInMs); 

EDIT：なぜbeforeunloadフックでこれを行う必要がありますか？手動オプションのユーザーをログアウトするように設定してみませんか？

Answer 2

ページがアンロードされたときにページ上で実行されたすべてが無効になるため、ページ自体に依存して非同期呼び出しを完了することはできません。

クロムエクステンションの場合は、1ページのバックグラウンドページを使用しています。 beforeunloadハンドラー内のバックグラウンドページにメッセージを送信し、対処する必要があるすべての情報を取得し、バックグラウンドページで非同期呼び出しを実行するだけです。サンプルコードは次のようになります。chrome.runtime.onMessage.addListenerのとき無効になるので、

window.addEventListener('beforeunload', function() { 
    chrome.runtime.sendMessage({ info: "Here is the info you would like to pass to background page"}); 
}); 

background.js

chrome.runtime.onMessage.addListener(function(request) { 
    // The following is your async call 
    logout(); 
    // Don't forget the following code 
    return true; 
}); 

は、背景ページにイベントリスナーからtrueを返すのを忘れないでください

content.jsイベントリスナーが返されます。詳細はthis answerを参照してください。