我有一个javascript代码，可以从另一个网页获取一些内容进行显示（使用HTTP GET）。经过一些测试，意识到该过程需要一些时间，我决定添加一个加载动画，该动画将一直运行到代码结束以从其他网页获取内容为止。如预期的那样，当内容完全加载时，加载动画消失。 我唯一的问题是，当过程开始时，加载动画会卡住。即使在我将流程定义为异步之后，也会发生这种情况。这是我的代码：
window.addEventListener('load', function() {
setTimeout(function() {
var response = httpGet("https://pub.s7.exacttarget.com/akduztal2rq");
}, 2000); // the GET method executes 2 seconds after the loading animation is loaded
});
async function httpGet(theUrl) {
xmlhttp = new XMLHttpRequest();
await xmlhttp.open("GET", theUrl, false);
await xmlhttp.send();
var r = xmlhttp.responseText;
document.getElementById("h").innerHTML = r;
document.getElementById("preloader").style.display = "none";
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://pub.s7.exacttarget.com/yqekxmddlvd">
</head>
<body>
<svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120"> <!--The animation -->
<style type="text/css" >
<![CDATA[
#plug,
#socket { fill:#D9E4E8 }
#loop-normal { fill: none; stroke: #D9E4E8; stroke-width: 12 }
#loop-offset { display: none }
]]>
</style>
<path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
<animate attributeName="stroke-dasharray" attributeType="XML"
from="500, 50" to="450 50"
begin="0s" dur="2s"
repeatCount="indefinite"/>
<animate attributeName="stroke-dashoffset" attributeType="XML"
from="-40" to="-540"
begin="0s" dur="2s"
repeatCount="indefinite"/>
</path>
<path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
L146.48,87.02z"/>
<path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z"/>
<path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z"/>
<animateMotion
xlink:href="#plug"
dur="2s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<mpath xlink:href="#loop-normal"/>
</animateMotion>
<animateMotion
xlink:href="#socket"
dur="2s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<mpath xlink:href="#loop-offset"/>
</animateMotion>
</svg>
<div id="h">
</div>
</body>
</html>如您所见，
svg标签负责生成动画，而setTimeout函数使HTTP GET方法在加载动画加载后2秒执行。无论如何，在开始的2秒钟内，动画可以正常工作，但是在GET进程开始2秒钟后，动画会卡住。知道如何解决这个问题吗？
答案 0 :(得分：1)
这是因为您试图从与您的域不同的源域访问资源。长话短说，其原因与CORS有关。
为了使这种请求成为可能，响应标头应包含以下标头：
Accept-Control-Allow-Origin: yourdomain.com
Access-Control-Allow-Headers: GET
更多有关的信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
答案 1 :(得分：1)
查看您的代码，我注意到您在XMLHttpRequest上使用async / await。 我不认为他们会返回等待中使用的承诺。
如果要使用异步/等待，请尝试使用提取API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.mocky.io/v2/5d249d172f0000736f241b00', true);
xhr.send();
xhr.onload = function () {
console.log('hi 1')
};
答案 2 :(得分：0)
您遇到网络错误，因此Javascript引发了异常，并且从未删除删除负载的代码，请尝试以下操作：
async function httpGet(theUrl) {
xmlhttp = new XMLHttpRequest();
try{
await xmlhttp.open("GET", theUrl, false);
await xmlhttp.send();
}catch(error){
console.log(error)
}finally {
var r = xmlhttp.responseText;
document.getElementById("h").innerHTML = r;
document.getElementById("preloader").style.display = "none";
}
}
详细了解try / catch / finally：https://www.w3schools.com/jsref/jsref_try_catch.asp
使用finally块删除加载是一种非常常见的模式，因为您总是想删除失败或成功的加载。
答案 3 :(得分：0)
setTimeout(function() {
var response = httpGet("https://jsonplaceholder.typicode.com/todos/1");
}, 3000);
function httpGet(theUrl) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'theUrl', true);
xmlhttp.send();
xmlhttp.onload = function () {
var r = xmlhttp.responseText;
document.getElementById("h").innerHTML = r;
document.getElementById("preloader").style.display = "none";
}
};<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://pub.s7.exacttarget.com/yqekxmddlvd">
</head>
<body>
<svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120"> <!--The animation -->
<style type="text/css" >
<![CDATA[
#plug,
#socket { fill:#D9E4E8 }
#loop-normal { fill: none; stroke: #D9E4E8; stroke-width: 12 }
#loop-offset { display: none }
]]>
</style>
<path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
<animate attributeName="stroke-dasharray" attributeType="XML"
from="500, 50" to="450 50"
begin="0s" dur="2s"
repeatCount="indefinite"/>
<animate attributeName="stroke-dashoffset" attributeType="XML"
from="-40" to="-540"
begin="0s" dur="2s"
repeatCount="indefinite"/>
</path>
<path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
L146.48,87.02z"/>
<path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z"/>
<path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z"/>
<animateMotion
xlink:href="#plug"
dur="2s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<mpath xlink:href="#loop-normal"/>
</animateMotion>
<animateMotion
xlink:href="#socket"
dur="2s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<mpath xlink:href="#loop-offset"/>
</animateMotion>
</svg>
<div id="h">
</div>
</body>
</html>