中止多个 xhr 请求

Question

考虑这种情况：我有一个项目列表和分页来按块加载它们。在每个下一页单击新的 XHR 调用以获取新的项目部分。当用户点击得非常快时，我有很多 xhrs 实际上没有必要，因为用户只想要最后点击的页面项目并且他们也占用资源。所以我可以中止除最后一个未决请求之外的所有请求，为它们中的每一个调用 xhr.abort()。问题是：中止多个 xhr 是否安全？我读到服务器可能认为这是某种攻击。如果是这样，要与后端人员检查哪些设置？

注意：产生 xhrs 的函数已经去抖动了 400 毫秒。

Answer 1

与其取消一个挂起的 xhr 请求，不如在发送请求之前将事件 debuff 几百毫秒。每次点击按钮时，您都会重置一个延迟 xhr 请求的计时器

const button = document.querySelector('#button')
const url = 'https://jsonplaceholder.typicode.com/posts/1'

const request = (function() {
  // save the current ajax request in the closure
  let ajax = null
  return function(url, params, cb) {
    if (ajax) {
      // if there is a current request cancel it
      ajax.abort()
      console.log('aborted ajax request')
    }
    // set a new xhr
    ajax = new XMLHttpRequest
    ajax.onreadystatechange = function() {
      if (ajax.readyState === 4 && ajax.status === 200) {
        // run the callback with the response
        cb(JSON.parse(ajax.responseText))
        // remove the previous request
        ajax = null
      }
    }
    ajax.open('GET', url, true)
    ajax.send(params)
  }
})()

const clickCallback = debuff(function(e) {
  console.log('clicked')
  // make the xhr request
  request(url, null, function(response) {
    console.log('response', response)
  })
}, 100)
                             
button.addEventListener('click', clickCallback, false)

function debuff(fn, delay) {
  let timer = null
  return function(e) {
    clearTimeout(timer)
    timer = setTimeout(e => fn(e), delay || 250, e)
  }
}

<button id="button">debuffed click</button>