javascript - 中止多个 xhr 请求

Question

考虑这种情况:我有一个项目列表和分页来按 block 加载它们。在下一页上单击新的 XHR 调用以获取项目的新部分。当用户单击速度非常快时，我有许多 xhr，其中实际上没有必要，因为用户只需要最后单击的页面项目，并且它们还占用资源。因此，我可以中止除最后一个未决请求之外的所有请求，为每个请求调用 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>