有2 Ajax调用时，为什么在浏览器锁定？ [英] Why does the browser lock when having 2 Ajax calls?
问题描述
我想了几个小时，但我不能得到这个工作。请帮助！
我有2阿贾克斯的功能，其中1将需要10秒才能完成，而另外一个，它会在2毫秒后完成。第二届功能将通过回调被调用。
- 在这两个函数自身 工作
- 只要第一功能正在运行的第二函数的输出被阻塞，直到第一功能已完成。
但是，这是不是针对异步阿贾克斯的理论？难道不应该是可能有两种功能运行并输出在同一时间？
下面是JQuery的：
$（'＃TBUT）。点击（函数（）{
//声明变量
VAR GO1 = TRUE;
VAR GO2 = TRUE;
变种Z = 1;
//消防第一Ajax调用
一个（）;
//用回调第一功能
函数A（）{
$阿贾克斯（{
网址：T2
}）
。总是（函数（）{
的console.log（'T2总是'）;
$（'＃tdiv）HTML（Z）; //更新DIV
Z = Z + 1;
如果（GO1）{
如果（GO2）{
的b（）;
}
的setTimeout（函数（）{一个（）}，2）; // 回电话
}
}）;
};
//第2个功能
函数b（）{
GO2 = FALSE;
$阿贾克斯（{
网址：T1
}）
.done（函数（）{
的console.log（'翅'）;
$（'＃tdiv）HTML（'翅'）; //更新DIV
GO1 = FALSE;
}）;
};
返回false;
}）;
控制器操作：
公共职能actionT1（）{
//使其需要一点时间...
$ i = 0;
而（$ I小于10）{
$ I ++;
睡眠（1）;
}
出口;
}
公共职能actionT2（）{
//什么也不做在这里的时刻...
出口;
}
视图：
＆LT;按钮ID =TBUT＆GT;做一些事情...＆LT; /按钮＆GT;
＆LT; DIV ID =tdiv＆gt;接着＆LT; / DIV＆GT;
我解决了（很明显的问题）。我声明没有合适的返回值，我的PHP函数。刚刚退出功能相当于是返回false，然后因为我没有成功（）或错误（）处理它会导致浏览器做奇怪的事情（大多只是完全锁定的观点）。
更新控制器功能：
公共职能actionT1（）{
//使其需要一点时间...
$ i = 0;
而（$ I小于10）{
$ I ++;
睡眠（1）;
}
返回true;
}
公共职能actionT2（）{
//什么也不做在这里的时刻...
返回true;
}
和
函数（）{
$阿贾克斯（{
网址：T2
}）
。总是（函数（）{
的console.log（'T2总是'）;
$（'＃tdiv）HTML（Z）; //更新DIV
Z = Z + 1;
如果（GO1）{
如果（GO2）{
的b（）;
GO2 = FALSE;
}
的setTimeout（函数（）{一个（）;}，200）; // 回电话
}
}）;
};
函数b（）{
$阿贾克斯（{
网址：T1
}）
.done（函数（）{
的console.log（成功）;
$（'＃tdiv）HTML（这个工程！）。 //更新DIV
}）
.error（功能（数据）{
的console.log（'故障'）;
$（'＃tdiv）HTML（data.responseText）; //更新DIV
}）
。总是（函数（）{
GO1 = FALSE;
}）;
};
I'm trying for hours now but I can't get this to work. PLEASE HELP!
I have 2 Ajax functions where 1 will take 10 seconds to complete, and another one, which will be completed after 2 mili seconds. The 2nd function will be recalled via callback.
- both functions work on its own
- as soon as the 1st function is running the output of the 2nd function is blocked until the 1st function is finished.
But is that not against the theory of asynchronous Ajax? Shouldn't it be possible to have both functions running and outputting at the same time?
Here's the JQuery:
$('#tbut').click(function(){
// Declare variables
var go1 = true;
var go2 = true;
var z = 1;
// Fire 1st Ajax call
a();
// 1st function with callback
function a() {
$.ajax({
url: 't2'
})
.always(function() {
console.log('t2 always');
$('#tdiv').html(z); // update DIV
z = z + 1;
if (go1) {
if (go2) {
b();
}
setTimeout(function(){a()},2); // callback
}
});
};
// 2nd function
function b() {
go2 = false;
$.ajax ({
url: 't1'
})
.done(function() {
console.log('fin');
$('#tdiv').html('fin'); // update DIV
go1 = false;
});
};
return false;
});
The controller actions:
public function actionT1() {
// make it take a little longer...
$i=0;
while ($i < 10) {
$i++;
sleep(1);
}
exit;
}
public function actionT2() {
// do nothing here at the moment...
exit;
}
The view:
<button id="tbut">do something...</button>
<div id="tdiv">now</div>
I solved the (quite obvious problem). I declared no proper return value to my php functions. Just exiting the function is equivalent with "return false" and as I have no success() or error() handler it causes the browser to do weird things (mostly just locking the view completely).
Updated controller functions:
public function actionT1() {
// make it take a little longer...
$i=0;
while ($i < 10) {
$i++;
sleep(1);
}
return true;
}
public function actionT2() {
// do nothing here at the moment...
return true;
}
and
function a() {
$.ajax({
url: 't2'
})
.always(function() {
console.log('t2 always');
$('#tdiv').html(z); // update DIV
z = z + 1;
if (go1) {
if (go2) {
b();
go2 = false;
}
setTimeout(function(){a();},200); // callback
}
});
};
function b() {
$.ajax({
url: 't1'
})
.done(function() {
console.log('success');
$('#tdiv').html('this works!'); // update DIV
})
.error(function(data) {
console.log('fail');
$('#tdiv').html(data.responseText); // update DIV
})
.always(function(){
go1 = false;
});
};
这篇关于有2 Ajax调用时，为什么在浏览器锁定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
