Question

我有一个包含文件的部分。可以使用箭头将每个文件上移或下移一个位置。当前，每次用户移动文件并更新新订单时，都会将请求发送到数据库。因此，如果用户要将底部文件移到顶部，请单击“向上”箭头10次，将发送10个请求。

如何发送比这更少的请求？

我的第一个想法是创建带有订单号的请求，等待一秒钟，创建第二个请求，如果它们相同（用户没有继续更改订单），则发送该请求（如果不是，则再等待一秒钟）并再次比较。但这似乎不是一件好事。还有其他方法吗？

$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>

如果收到新请求，如何取消发送请求？

1 个答案: