AJAX调用未完成时停止执行JS函数
Stop JS function execution while an AJAX call is not finished
我写了一个小函数来动态包含CSS文件或JS文件。我用jquery函数$.getScript()
加载JS文件。
我想在AJAX调用完成之前阻止函数返回。
我试过这样的东西,但不起作用:
CAPTIVEA.resources._includeResource = function(resource) {
var ret = false;
if (CAPTIVEA.resources.isIncluded(resource))
{ // Resource already included => do nothing
console.log('CAPTIVEA.resources : "' + resource + '" is already included.');
ret = true;
}
else
{ // Resource not included => try to include it
var resType = CAPTIVEA.resources.getType(resource);
switch (resType)
{ // Check resource type to know how to include it
case 'js':
$.when(
$.getScript(resource, function(data, textStatus){
console.info('CAPTIVEA.resources : "' + resource + '" dynamically loaded.'); //success
})
).done(function(){
ret = true;
});
break;
case 'css':
// Load CSS file ...
break;
default:
console.error('CAPTIVEA.resources : "' + resource + '" is not an includable resource.');
break;
}
}
return ret;
}
您可以使用$.ajax并将async设置为false,以便它在继续之前等待响应:
$.ajax({
url: resource,
success: function(data, textStatus) {
console.info('CAPTIVEA.resources : "' + resource + '" dynamically loaded.'); //success
},
dataType: 'script',
async: false
});
使用通常不需要同步调用。AJAX的全部意义在于它是异步的。第一个A代表异步。
为什么需要阻止函数返回?通常,这是因为您希望在加载时使用资源(在本例中是脚本)。你必须使用回调:
错误:
$.getScript(resource);
doSomethingWithResource();
右:
$.getScript(resource, function() {
doSomethingWithResource();
});
试试这个:
CAPTIVEA.resources._includeResource = function(resource) {
var ret = false;
if (CAPTIVEA.resources.isIncluded(resource))
{ // Resource already included => do nothing
console.log('CAPTIVEA.resources : "' + resource + '" is already included.');
ret = true;
}
else
{ // Resource not included => try to include it
var resType = CAPTIVEA.resources.getType(resource);
successFlag = false;
switch (resType)
{ // Check resource type to know how to include it
case 'js':
jQuery.ajax({
async:false,
type:'POST',
url: resource,
data: null,
success: function(){successFlag =true;}
});
break;
case 'css':
// Load CSS file ...
break;
default:
console.error('CAPTIVEA.resources : "' + resource + '" is not an includable resource.');
break;
}
ret = successFlag;
}
return ret;
}
我认为这是唯一的解决方案,尽管我们必须添加一个全局变量(successFlag)。另一种解决方案是在成功回调时做你必须做的事情,但这样你的函数就不会像你预期的那样工作。
相关文章:
- Meteor:插入集合后如何执行JS
- 如何在Odoo 9中执行JS文件中的函数
- 匿名自执行js函数内部的全局变量在外部仍然可用
- NumericTextBox-当用户键入数字时执行JS计算.能做到吗
- 引导:响应式设计-当窗口大小从980px调整到979px时执行JS
- 对页面上的所有ID执行JS功能
- 从浏览器访问页面时执行js函数's后退按钮
- 源代码未完全执行.(JS)
- 在执行JS脚本后监视对DOM的更改
- 在表单同步提交后执行 js 吗?
- 在 ubuntu 14.04 VPS 上执行.js文件错误
- 从PHP插入时在MongoDB上执行JS
- 在将ajax内容应用到元素后执行js函数
- Windows Phone浏览器控件执行JS函数来替换src属性
- 到达新页面后执行js
- 用C#在Win 8.1 Chakra中执行JS的一个失败的最小例子
- 在sharepoint显示模板中执行JS
- 在Bootstrap popover内部执行JS
- 从引导程序popover内容内部执行js
- 顺序执行js