如何做一個隊列以等待5秒鐘來執行一個函數

Question

每次更新一個對象時，我需要輸入一個debounce。

這是我需要解決

updatePlayerAmount (data) { 
    this.state.playerSlots[data.position - 1].playerAmount = data.playerAmount; 
    } 

data返回這樣的事情

{ 
    playerAmount : 10, 
    position  : 2 
} 

的playerAmount鍵將改變對某一個元素每次點擊他的價值帕拉姆的功能。

SO：

每次用戶點擊某些元件上，該量將在這個視圖改變，但我需要的量每5秒進行更新，它物質簡化版，用戶是否點擊7時間在2秒內。

我用5秒鐘的setTimeout做了它，但我遇到的問題是用戶在5秒內點擊了7次元素，而且看不到所做的更改，而是全部更改只有一次。而且我需要用戶每5秒鐘觀察視圖中的更改。

根據同事給我的解釋，我需要把新的變化放在一個數組中，並且聽取這些變化......（？）但是，怎麼樣？

你明白了嗎？

PS：我正在使用lodash但我不知道如何在這種情況下使用它。

更新

我做了這樣的

_playerAmount = (data) => { 
    this.state.playerSlots[data.position - 1].playerAmount = data.playerAmount; 
    } 

    updatePlayerAmount (data) { 
    _.debounce(this._playerAmount(data), 5000); 
    } 

，但我在控制檯

Uncaught TypeError: Expected a function

所以得到一個錯誤，在這裏你有什麼建議？

Answer 1

您需要通過.debounce a 函數。現在您是，致電this._playerAmount(data)，並將其返回值（undefined）傳遞給.debounce。

試試這個：

_.debounce(this._playerAmount.bind(this, data), 5000); 

你也可以這樣做：

var func = this._playerAmount; 
_.debounce(function(){ 
    func(data); 
}, 5000); 

Answer 2

在你的問題的部分是contraray：

首先，你說你要只更新每5秒，而不是當用戶點擊時。

everytime the user clicks on certain element, that amount is going to change in the view, but I need that amount to be updated every 5 seconds, it does't matter whether the user clicks 7 times within 2 seconds.

那你說的這些變化在5秒後只看到如果他點擊了幾次。

I did it with a setTimeout of 5 seconds, but the issue I had, was that the user clicked on the element 7 times within the 5 seconds, and you couldn't see the changes one by one but the full change only once. And I need the user visualizing the changes in the view every 5 seconds.

你究竟想要什麼？如果你回答我的問題，我可以幫助你。

編輯：

好吧，我想我現在您可以通過「排隊的點擊次數」的意思搞明白 - 這應該這樣做：

function updatePlayerAmount(data) { 
    this.state.playerSlots[data.position - 1].playerAmount = data.playerAmount; 
} 

var clicks = []; // Array to save every new data object in 
var notRunning = true; // boolean to determine if there still is a timeout running 

function click(data){ 
    // on each click the data is pushed into the clicks array, 
    // then startUpdate() is called 
    clicks.push(data); 
    startUpdate(); 
} 

function startUpdate(){ 
    // the worker which makes the timeouts is only called if there 
    // is no timeout running still 
    if(notRunning){ 
     notRunning = false; 
     worker();  
    } 
} 

function worker(){ 
    // if there are no clicks left the worker will stop 
    if(clicks.length == 0){ 
     notRunning = true; 
    }else{ 
     // else it will set a timeout 
     window.setTimeOut(function(){ 
      // updatePlayerAmount is called with the first data in clicks 
      updatePlayerAmount(clicks[0]); 
      // the first data in clicks gets removed from the array 
      clicks.shift(); 
      // worker calls itself to see if there are still clicks 
      worker(); 
     }, 5000) 
    } 
}