<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>重复请求问题</title>
</head>
<body>
<button type="button">点击发送</button>
<button type="button">点击取消</button>
<script type="text/javascript">
var btn = document.querySelectorAll('button');
let xhr = null;
var isSending = false; //判断是否正在发送请求,默认为false
//点击发送请求
btn[0].onclick = function(){
//判断 isSending 是否为真,为真则取消上一个请求
if(isSending){
xhr.abort();
}
xhr = new XMLHttpRequest();
//当请求发送时 isSending 为 true
isSending = true;
xhr.open('GET','http://127.0.0.1:3000/delay');
xhr.send();
xhr.onreadystatechange = function(){
//当请求发送完成时 isSending 为 false
if(xhr.readyState === 4){
isSending = false;
}
}
}
//点击取消请求
//abort() 方法用于取消请求
btn[1].onclick = function(){
xhr.abort();
}
</script>
</body>
</html>
重复请求问题
最新推荐文章于 2023-12-16 12:13:08 发布