Question

我为div“生成板”定义了一个click事件。单击它时，会生成随机数独板。问题是我希望div在生成电路板时具有闪烁效果，但在generate_random_board（）函数完成之前它不会闪烁。我在那里放了一个超时功能，以便GUI线程重新获得控制和更新。这适用于更改文本/电路板输入，但不适用于淡入淡出效果（在for循环中）。有谁知道这是为什么，以及如何解决它？同样，我只希望div在“generate_random_board（）”函数运行时闪烁，并在完成时停止。谢谢！

以下是相关代码：

$('.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);  
            });

Answer 1

你的褪色可能会互相蚕食。相反，尝试以这种方式链接它们：

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);  
            });

GUI线程无法使用jQuery正确更新

1 个答案: