我有来自两个不同URL的HTML内容,我需要将它们附加到一个HTML元素。
使用JavaScript ES5,我尝试创建一个字符串变量,并简单地连接两个HTTP请求的结果。
当我完成我的请求时,我希望这个变量具有以下字符串值:
<script src='foo/bar/script.js'></script><div>content</div>
然后,我希望获取该变量并将其(使用jQuery)附加到页面中的一个HTML元素。最终目标是用两个HTTP请求的结果填充div,如下所示:
<div class="target-element">
<script src='foo/bar/script.js'></script><div>content</div>
</div>
我在代码中不理解的是,为什么我在storeHttpResult
中的console.log会像我期望的那样反映combinedHttpResult
变量,而在getContent
中,combinedHttpResult
却没有被修改。
var libsLocation = 'http://some/location/libs.html'; //contents: <script src='foo/bar/script.js'>
var htmlLocation = 'http://some/location/snippet.html'; //contents: <div>content</div>
var combinedHttpResult = '';
// taken from David Flanagan JavaScript book, p499:
function getText(url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader("Content-Type");
if (type.match(/^text/)) // make sure the response is text
callback(request.responseText); // pass it to the callback
}
};
request.send(null);
}
function storeHttpResult(e) {
console.log('before: ' + combinedHttpResult);
combinedHttpResult += e;
console.log('after: ' + combinedHttpResult);
}
function getContent(libLoc, htmlLoc) {
console.log('**** ' + combinedHttpResult);
if ($('.target-element').length > 0 ) {
$('.target-element').each(function() {
getText(libLoc, storeHttpResult);
getText(htmlLoc, storeHttpResult);
$(this).append(combinedHttpResult); // empty string - why?
});
}
console.log('~~~~ ' + combinedHttpResult);
}
getContent(libsLocation, htmlLocation);
发布于 2018-07-29 05:23:34
这是一个竞态条件的问题。为了清楚地理解问题的本质,你必须理解javascript中的"Event Loop“是如何工作的。
长话短说(希望你会看这个视频)是你的代码没有按照编写的顺序执行。
您所期望的是,当您调用getText()时,它将调用所有底层函数,但是这里的执行流程有点不同步。下面是调用getText(libLoc,storeHttpResult)时发生的情况;
事件的一个实例被创建并被调用
请注意,最后一步是调用getContent上的下一个表达式。storeHttpResult将在请求完成时执行,您无法预测它将在何时发生。
在这种情况下,这种异步的解决方案。操作已创建。最简单的例子是Promises。这取决于你必须支持什么浏览器,但如果它恰好是一个现代的浏览器,我强烈建议你使用Promises。
使用promises,解决方案可能如下所示:
function getText(url) {
return new Promise(function(resolve){
var request = new XMLHttpRequest();
request.open('GET', url);
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader("Content-Type");
if (type.match(/^text/)) // make sure the response is text
resolve(request.responseText); // pass it to the callback
}
};
request.send(null);
});
}
function getContent(libLoc, htmlLoc) {
console.log('**** ' + combinedHttpResult);
if ($('.target-element').length > 0 ) {
$('.target-element').each(function() {
var self = this;
Promise.all([getText(libLoc), getText(htmlLoc)]).then(function(response){
$(self).append(response[0]);
$(self).append(response[1]);
});
});
}
console.log('~~~~ ' + combinedHttpResult);
}
getContent(libsLocation, htmlLocation);
请注意,这段代码可以改进一些东西,但理解如何处理Promise是一个很好的开始。
如果您想更深入地挖掘这个主题,还存在其他解决方案,如Generators和Observables。
https://stackoverflow.com/questions/51575055
复制相似问题