如果有新請求傳入，如何取消發送請求？

Question

我有一個包含文件的部分。 每個文件都可以用箭頭向上或向下移動一個位置。 當前，每次用戶移動文件時都會向數據庫發送請求，並更新新訂單。 因此，如果用戶想要將底部文件移到頂部，單擊“向上”箭頭 10 次，將發送 10 個請求。

我怎樣才能發送比這更少的請求？

我的第一個想法是用訂單號創建請求，等待 1 秒，創建第二個請求，如果它們相同（用戶沒有繼續更改訂單），然后發送它，如果不是，再等一秒鍾並再次比較. 但這似乎不是一件好事。 還有其他方法嗎？

$ctrl.saveFileOrder = function() {
  var firstRequest = [];  

  for(var i = 0; 1 < $ctrl.fileArray.length; i++) {
    firstRequest.push({$ctrl.fileArray[i].id, $ctrl.fileArray[i].orderNumber});
  }

  var secondRequest = [];

  while(firstRequest != secondRequest) {
    //put thread to sleep for 1 second here

    for(var i = 0; 1 < $ctrl.fileArray.length; i++) {
      secondRequest.push({$ctrl.fileArray.id[i], $ctrl.fileArray.orderNumber[i]});
    }
  }

  //send the final request
}

Answer 1

您可以disable該按鈕，直到收到來自服務器的響應，以便用戶無法在更新數據庫之前再次單擊。

 const buttons = document.querySelectorAll('.js-move'); /** * Simulation of a request with a 2 second duration */ const sendRequest = value => new Promise(resolve => { console.log(`Updating to DB: ${value}`); buttons.forEach(button => button.disabled = true); setTimeout(() => { console.log('Update done'); buttons.forEach(button => button.disabled = false); resolve(); }, 2000); }); buttons.forEach(button => { button.addEventListener('click', event => { const { value } = event.target; sendRequest(value); }); });

 <button class="js-move" value="-1">Move up</button> <button class="js-move" value="+1">Move down</button>

或者，您正在尋找一種節流功能，顧名思義，它可以通過您設置的指定數量限制調用量。 因此，您每秒只能發出一次新請求。

 const throttle = (callback, wait, immediate = false) => { let timeout = null; let initialCall = true; return (...args) => { const callNow = immediate && initialCall const next = () => { callback(...args); timeout = null; } if (callNow) { initialCall = false; next(); } if (!timeout) { timeout = setTimeout(next, wait); } } } const buttons = document.querySelectorAll('.js-move'); /** * Mock function where you send a request. */ const sendRequest = value => { console.log(`Updating to DB: ${value}`); } /** * Create throttled version of your request. * The number indicates the interval in milliseconds between * calling the sendRequest function. */ const throttledRequest = throttle(sendRequest, 1000, true); buttons.forEach(button => { button.addEventListener('click', event => { const { value } = event.target; throttledRequest(value); }); });

 <button class="js-move" value="-1">Move up</button> <button class="js-move" value="+1">Move down</button>