機能の延期を延期する方法

Question

私はショッピングカートを構築していますが、商品が追加されるか、量が変更されるたびにhttpリクエストを行う必要があります。

カートに1ユニットの商品を追加するボタンが1つありますが、追加された各ユニットがhttpリクエストを行うはずですが、一度に多くの通話を避けたいと思っています。要求のタイムアウトを設定しますが、3秒以内に再度クリックすると、古いデータで最後の要求をキャンセルしてから、新しいデータで新しいタイムアウトを設定する必要があります。

だから私は、関数が状態オブジェクト（すべてのアプリケーションを介して固定変数とデータの収集）を取得し、別の関数の中で、このソリューション

function doRequest(){ 
    clearTimeout(state.request); 
    state.request = setTimeout(updateCartService, 180);  
} 

を思い付きました。 updateCarteService関数にhttp要求が含まれています。

しかし、私は5回、doRequestをトリガーするボタンを5回クリックすると、私は5回excecutedされている呼び出しを行っています。

私の目標を達成するには、何が間違っているか、おそらくもっと良い方法があるのか​​分かりませんか？

私はvueJsを使用してサイトを膨らませている場合は、vuex（flux）とこのコードはアクション内にあります。

Answer 1

setTimeoutにはミリ秒かかるため、180msのタイムアウトを設定します。短すぎます。例えば3000回試してみてください。ここでは小さなjsfiddleの例です。それは働いていた

https://jsfiddle.net/ShinShil/5fw2c63o/

var timeout; 
$('#click').click(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(setText, 3000); 
}); 

function setText() { 
    $('#text').append('text'); 
}