0

私はJSに少し慣れていないので、私が取り組んでいるアプリケーションで非同期相互作用を設計する最良の方法を考えようとしています.

いくつかのライブ API に基づくデータに関連するレコードのリストを取得しました。これらのレコードのリストをユーザーに表示すると、ユーザーは詳細情報を表示したい特定のレコードを選択できます。この追加データは、ajax 呼び出しを介して API からロードします。

これをより現実的な例にするために、私が持っているのは株のリストだとしましょう。各銘柄の名前と昨日の終値を取得しました。各銘柄の横にチェック ボックスがあり、ユーザーがこのボックスをチェックすると、過去 1 年間の過去の株価がグラフにプロットされます。

ユーザーが途中で 1 つの銘柄を選択した場合の動作は単純です。1 つの株の履歴データに対して 1 つの API リクエストを送信し、それをグラフにプロットします。

ただし、ユーザーは一度に、または立て続けに多数の銘柄を選択する場合があります。10 回、20 回、または 50 回のリクエストを続けて実行したくはありません。

私のアプリケーションに、チェック ボックスが切り替えられたときに株式履歴を検索するイベント リスナーがあるとします。たとえば、次のようになります。

$('input.stock_toggle').change( function(event){
  var symbol = $(this).data('symbol');
  lookupStockHistory(symbol);
});

lookupStockHistory何度も連続して発火するのではなく、1 秒間待って、入ってきたすべてのイベントをプールして単一のリクエストを送信する関数、またはその他の種類のイベント リスナーなどを定義するにはどうすればよいでしょうか?

4

3 に答える 3

2 
var lookupStockHistory = (function () {
"use strict";
var qeue = [], timeoutHandler = null, timeoutTime = 1000,
    sendCall = function () {
        //process qeue array and trigger ajax call
        //and clean qeue
        qeue = [];
    },
    add = function (symbol) {
        if (timeoutHandler) {
            clearTimeout(timeoutHandler);
            timeoutHandler = null;
        }
        qeue.push(symbol);
        timeoutHandler = setTimeout(sendCall, timeoutTime);
    };
return add;}());

トリガーするには、 を呼び出すだけlookupStockHistory(symbol)です。これにより、シンボルが配列に収集され、最後の呼び出しから 1 秒後に処理されます

于 2013-05-14T17:02:30.473 に答える
1

名前空間でリクエストを「グローバル変数」にプッシュしてsetTimeoutから、AJAX 呼び出しを遅らせることができます (1 秒か 2 秒でしょうか?)。

「setTimeoutグローバル変数」からリクエストを取得し、変数を空にしてから、リクエストを作成する関数を呼び出します。関数への後続の呼び出しはsetTimeout、「グローバル変数」が空であることを確認し、将来の AJAX 要求を構築しません。

以下の例では、新しいタイムアウトが開始されたため、現在の保留中のタイムアウトも削除します。

選択とイベント キャプチャに jQuery を使用した疑似コードの例を次に示します。

var DELAY_FOR_INPUT = 2000; // 2 seconds

var g_MyDataToRequest = [];
var g_currentAJAXCallTimeout = null;

function _callAPI = new function() {
   g_currentAJAXCallTimeout = null;
   var dataToGet = g_MyDataToRequest;
   g_MyDataToRequest = []; // clear out global request cache

   // TODO: Loop over dataToGet and construct AJAX request
   // TODO: Perform AJAX call...
}

$('.myCheckbox').click(function() {
   var myRequest = $(this).attr("ID"); // or Val(), or whatever you'd like to track your item
   g_MyDataToRequest.push( myRequest );

   // If have a pending request, kill it
   if (g_currentAJAXCallTimeout != null) {
     clearTimeout(g_currentAJAXCallTimeout);
     g_currentAJAXCallTimeout = null;
   }

   g_currentAJAXCallTimeout = setTimeout( _callAPI, DELAY_FOR_INPUT );
});

前述のように、これは疑似コードであり、正しく動作しない可能性がありますが、うまくいくはずです。

于 2013-05-14T17:09:37.933 に答える
0

タイマーを実装して、最初のクリックまたは変更イベントで開始できます。また、追加のクリックまたは変更イベントごとに、タイマーをリセットできます。また、各イベントで、それに応じてシンボル値を配列に追加または削除できます。タイマーが切れたら、配列を結合してカンマ区切りの文字列にし、それを ajax 経由でポストして、JSON の結果を取得します。

于 2013-05-14T17:02:49.667 に答える