ajax超时不执行回调方案
前言
前两天有小伙伴找我说:面试官给了一个题,向服务器发出ajax请求,若1s内没有响应,则不执行回调,且只允许使用setTimeout
。这些需求如何实现?
方案
首先,要读懂这道题的核心。设置回调超时,且只允许使用setTimeout
那么就是,不允许在主线程阻塞。那么这道题考的知识点显而易见是Event Loop
事件循环了。如果想阻止回调,其实是不太可能了,因为ajax发出后,钩子函数就会被推入回调执行栈中。那么,我们只能通过修改回调方法来阻止执行了。
首先,我们要启动一个服务器。我是用node.js
来启动的。在本地启动还需要保证能被跨域,所以我们也要解决跨域。
server.js
const http = require('http');
const server = http.createServer();
server.on('request', function (req, res) {
var now = Date.now();
while(Date.now()-now<3000){//延时3秒
}
res.setHeader('Access-Control-Allow-Origin', '*');//设置跨域
res.end("hello world");
})
server.listen(3000, "127.0.0.1", function () {
console.log('服务器启动成功啦!')
})
index.js
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
function ajax(){
var xhr = new XMLHttpRequest();
let timeOut = false;
xhr.open("get","http://127.0.0.1:3000",true);
xhr.send()
setTimeout(()=>{
timeOut = true;
},1000)//超过1s设置状态
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4){
if(xhr.status == 200){
if(timeOut){//根据状态调整回调方法
console.log("超时!")
}else{
console.log("未超时 执行")
}
}
}
}
}
ajax()
完事,整体思路就是这样的。
声明
脑瘫码农 纯属自学 如果错误 望请指正 共同学习 不胜感激