Неправильно обновляется поток GUI с помощью jQuery

Question

Я определяю событие click для div "generate board".Когда вы нажимаете на нее, генерируется случайная доска судоку.Проблема в том, что я хочу, чтобы 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);  
            });