"prev"ボタンを複数回クリックすると、複数のajaxクエリが実行されないようにするにはどうすればいいですか？

Question

私は自分のカレンダーをデフォルトで "agendaWeek"ビューに表示しています。 私は動的イベントデータを取り込むために "イベント（関数として）"を使用しています。

すぐに私が見たいと思うように、私はすぐに "prev"を何回かクリックします。インターフェイスはすぐにキャッチアップしますが、クリックするたびにajaxリクエストがトリガーされます。これは理想的ではありません。なぜなら、介在する各週のAjaxリクエストを処理する必要があるため、希望の週の応答時間を遅くするからです。

これをどのように緩和できますか？私の考えは、これが本当に機能要求であるということです。ライブラリは、 "イベント"機能を実行する前に300ミリ秒間待機する必要があります。

Answer 1

あなたはajaxing機能をデバウンスする必要があるように聞こえる：

The Debounce technique allow us to "group" multiple sequential calls in a single one.

Here's最新のlodashの実装は、私が使用するものです。

Answer 2

ユーザーもこの記事を読んで http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

それはあなたがあなたの問題 observable

を解決するのに役立ちます観測、このコードは、角度でのその真上記のリンクからですが、あなたはどこでも観測を使用することができます。

constructor(private wikipediaService: WikipediaService) { 
    this.term.valueChanges 
      .debounceTime(400) 
      .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items)); 
    } 

Answer 3

function delayAjax(ajaxCall){ 
    clearTimeout(myFn); 

    myFn = setTimeout(ajaxCall(), 300) 

} 

と

<button id="btnNext" onclick="delayAjax(ajaxCall);"><button> 

そのような何か...

Answer 4

私はeventSourcesを使ってデバウンスを取得し、各イベントソースごとに1つの関数の配列を返すことができました。 getSources機能は便宜上のものです。 fullCalendar構成では、我々は持っているでしょう：

... 
eventSources: getSources(), 
... 

と機能コード：

let source1Params = {}; 
let source2Params = {}; 

let debouncedSource1 = debounce(
    function() { 
    $.ajax({ 
     url: 'source/1/feed', 
     dataType: 'json', 
     data: { 
     start: source1Params.start, 
     end: source1Params.end 
     }, 
     success: function(response) { 
     // Parse the response into an event list 
     let eventList = ... 
     source1Params.callback(eventList); 
     } 
    }); 
    }, 200 
); 

let debouncedSource2 = debounce(
    function() { 
    $.ajax({ 
     url: 'source/2/feed', 
     dataType: 'json', 
     data: { 
     start: source2Params.start, 
     end: source2Params.end 
     }, 
     success: function(response) { 
     // Parse the response into an event list 
     let eventList = ... 
     source2Params.callback(eventList); 
     } 
    }); 
    }, 200 
); 

function getSources() { 
    return [ 
    { 
     id: 'source1', 
     events: (start, end, timezone, callback) => { 
     source1Params = { 
      'start': start, 
      'end': end, 
      'timezone': timezone, 
      'callback': callback 
     }; 
     debouncedSource1(); 
     } 
    }, 
    { 
     id: 'source2', 
     events: (start, end, timezone, callback) => { 
     source2Params = { 
      'start': start, 
      'end': end, 
      'timezone': timezone, 
      'callback': callback 
     }; 
     debouncedPlanned(); 
     } 
    } 
    ]; 
} 

これは部分的に動作し、あなたが連続して次または前のボタンをクリックした場合、すなわち、それは、送信、複数の要求を防ぐことができます必要に応じて最後のものだけを削除します。ただし、これには複数の警告があります。

• loadingコールバックの設定が無効になります。これは、loadingLevelが内部でどのように実装されているかによって、速いクリックでは増加しますが、減少しないためゼロにはならず、コールバックをトリガーします。
• 次へをクリックすると、デバウンスタイマーが終了し、ロードが開始されるのを待ってから、ロード中にもう一度クリックすると、イベントがレンダリングされずに予期しない結果になります。私の解決策は、イベントがロードされている間にナビゲーションボタンを無効にすることです。これにより問題は解決されますが、ナビゲーションのレスポンスは低下します。