我试图使用Promises一个接一个地运行一些函数,但不知何故,第二个函数要么在第一个函数之前执行,要么根本不执行。情况是这样的:
我有以下功能:
function insertingPartials() {
return new Promise( function(resolve,reject) {
$('#navbar-placeholder').load('/Assets/Partials/navbar.html');
$('#jumbotron-placeholder').load('/Assets/Partials/jumbotron.html');
$('#footer-placeholder').load('/Assets/Partials/footer.html');
resolve();
reject('Error');
});
function languageSpecifics() {
return new Promise( function(resolve,reject) {
//showing correct text per html language
$('span[lang=' + $('html')[0].lang + ']').show();
$('div[lang=' + $('html')[0].lang + ']').show();
//disabling the current language from the language selection menu
$('a[lang=' + $('html')[0].lang + ']').addClass('disabled');
//links dynamically point to the correct sub-pages
$('.blog-link').attr('href', '/' + $('html')[0].lang + '/Blog/');
$('.prod-link').attr('href', '/' + $('html')[0].lang + '/' + $('.prod-link span[lang=' + $('html')[0].lang + ']').text() + '/');
$('#en').attr('href', window.location.href.replace($('html')[0].lang, 'en'));
$('#es').attr('href', window.location.href.replace($('html')[0].lang, 'es'));
$('#ro').attr('href', window.location.href.replace($('html')[0].lang, 'ro'));
resolve();
reject('Error in ' + arguments.callee.name);
});
}
function loadContent() {
return new Promise( function(resolve,reject) {
//fading content in
$('nav').animate({top: '0'});
$('footer').animate({bottom: '0'});
$('.main-content').animate({right: '0'}).css('overflow', 'auto');
//fading preloading out
$('.spinner-border').fadeOut();
$('#preloading').removeClass('d-flex').addClass('d-none');
resolve();
reject('Error in ' + arguments.callee.name);
});
}
function setContainerHeight() {
//setting the height of the container
$('.container').css('height', $('body').height() - ($('nav').height() + $('footer').height()) + 'px');
}
我要做的是让函数按照我将它们放在上面的顺序执行。下面的代码输出1,2,3,4但函数“languageSpecifics”没有执行或者它在“insertedPartials”之前执行,因为部分被加载,然后组件滑入视图,但是文本无法看到,也没有链接指向任何地方。
$(document).ready( function() {
console.log('1')
insertingPartials().then( function() {
console.log('2');
languageSpecifics().then( function() {
console.log('3');
loadContent().then( function() {
console.log('4');
setContainerHeight();
});
});
});
});
如果我在浏览器控制台中单独执行这些功能,我会获得所需的输出,并且每个承诺都会得到满足。如果我使用.then()运行它们,则promise将返回pending,并且我在页面上没有任何文本。 (两者都嵌套“.then(.then())和相同级别”.then()。then()“给出相同的结果)
我想知道我在这里做错了什么。此外,如果有更好/更有效的方式来实现我在这里尝试做的事,请建议。
load()
是异步的,允许完整的回调但不是承诺
你可以用load()
替换$.get()
,它确实返回了promise并在所有3个加载后使用$.when()
进行调用:
除了ajax之外没有任何异步需要在你的dom操作函数中使用promises,你可以按照首选顺序调用那些函数而不需要任何promises ....只有初始加载承诺
就像是:
// page load call
$(function(){
loadAllPartials().then(function(){
languageSpecifics();
contentDisplay();
});
});
// get single partial and insert in dom, return promise
function loadPartial(url, selector) {
return $.get(url).then(function(data) {
$(selector).html(data);
})
}
// return `$.when()` promise for loading all partials
function loadAllPartials() {
return $.when(
loadPartial('/Assets/Partials/navbar.html', '#navbar-placeholder'),
loadPartial('/Assets/Partials/jumbotron.html', '#jumbotron-placeholder'),
loadPartial('/Assets/Partials/footer.html', '#footer-placeholder')
)
}
// adjusted to synchronous code, no promises needed
function contentDisplay() {
//fading content in
$('nav').animate({top: '0'});
$('footer').animate({bottom: '0'});
$('.main-content').animate({right: '0'}).css('overflow', 'auto');
//fading preloading out
$('.spinner-border').fadeOut();
$('#preloading').removeClass('d-flex').addClass('d-none');
}
function languageSpecifics() {
// store lang value once instead of searching dom each time
var lang = $('html')[0].lang
//showing correct text per html language
$('span[lang=' + lang + ']').show();
$('div[lang=' + lang + ']').show();
//disabling the current language from the language selection menu
$('a[lang=' + lang + ']').addClass('disabled');
//links dynamically point to the correct sub-pages
$('.blog-link').attr('href', '/' + lang + '/Blog/');
$('.prod-link').attr('href', '/' + lang + '/' + $('.prod-link span[lang=' + lang + ']').text() + '/');
$('#en').attr('href', window.location.href.replace(lang, 'en'));
$('#es').attr('href', window.location.href.replace(lang, 'es'));
$('#ro').attr('href', window.location.href.replace(lang, 'ro'));
}
还不能发表评论。 Afaik .load()是一个异步函数,这意味着在加载页面之前调用以下解析。您应该尝试使用.load()的回调参数,并在完成所有这些参数后调用resolve。
如果你想要同步行为(即按顺序触发一个接一个的函数),请尝试async
函数和await
关键字。
const _A_ = () => {
return new Promise(resolve => {
setTimeout(() => resolve({{FUNCTION}}), {{TIME}});
});
}
async
函数:
const _Y_ = async() => {
... /* Promises */
}
async
函数结束时,使用关键字await
按顺序调用每个Promise:
const _Y_ = async() => {
... /* Promises */
await _A_();
await _B_();
await _C_();
await _D_();
}
以下演示不起作用,如果您想查看功能演示,请转到此Plunker
const main = document.forms[0];
const loader = async(time = 700) => {
const ajax1 = () => {
return new Promise(resolve => {
setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set1'))), time);
});
}
const ajax2 = () => {
return new Promise(resolve => {
setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set2'))), time);
});
}
const ajax3 = () => {
return new Promise(resolve => {
setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set3'))), time);
});
}
const ajax4 = () => {
return new Promise(resolve => {
setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set4'))), time);
});
}
await ajax1();
await ajax2();
await ajax3();
await ajax4();
}
const getComp = e => {
e.preventDefault();
loader();
}
main.onsubmit = getComp;
.set::before {
content: attr(id);
font: 400 16px/1 Consolas;
}
button {
font: inherit;
float: right;
}
<!doctype html>
<html>
<head>
</head>
<body>
<form id='main'>
<fieldset class='base'>
<legend>Synchronous AJAX</legend>
<ol></ol>
</fieldset>
<button>GO</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>