GUI线程无法正确更新jQuery
问题描述:
我为div“生成板”定义了一个click事件。当你点击它时,会产生一个随机数独板。问题是我希望div在生成电路板时具有闪烁效果,但在generate_random_board()函数完成之前不会闪烁。我在那里放了一个超时函数,以便GUI线程重新获得控制和更新。这适用于更改文本/板子输入,但不适用于渐变效果(在for循环中)。有谁知道这是为什么,以及如何解决它?同样,我只想让div在“generate_random_board()”函数运行时闪烁,并在完成时停止。谢谢!GUI线程无法正确更新jQuery
下面是相关代码:
$('.generate_board').click(function(){ // generate a random board click
$(this).text('Generating Board...');
for(i=0;i<3;i++){
$(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
}
$('.board_input').val('');
$('.sudoku_message_box').text('This uses an NP-hard algorithm, so it can take a while...');
window.setTimeout(function(){
generate_random_board();
}, 30);
});
答
你变淡很可能吃了对方。相反,尝试以这种方式链接它们:
function fadeInOutSlow(obj, x){
obj.fadeTo('slow', 0.5, function(){
obj.fadeTo('slow', 1.0, function(){
if ((x-1) > 0) fadeInOutSlow(obj, x-1);
});
});
}
$('.generate_board').click(function(){ // generate a random board click
$(this).text('Generating Board...');
fadeInOutSlow($(this), 3);
$('.board_input').val('');
$('.sudoku_message_box').text('This uses an NP-hard algorithm, so it can take a while...');
window.setTimeout(function(){
generate_random_board();
}, 30);
});
传递给'obj.fadeTo()'的第三个参数是回调函数。这个函数直到转换完成后才会执行,这就是为什么这个方法成功了 - 在淡入时它不能淡出(这可能是你的3连续淡出/进入的状态) – 2012-02-22 19:54:05
我的方法起作用,它只是在generate_random_board()之后才开始闪烁。我可以完全取出for循环,它仍然执行相同的操作。我试过你的代码,它也做了同样的等待。 : - \ – 2012-02-22 21:00:59
你有没有在线的例子?很难从其他设置的背景中看出可能导致问题的原因。 – 2012-02-23 04:39:09