GUIスレッドがjQueryで正しく更新されない

Question

divの "click board"イベントを定義します。クリックすると、ランダムなスドクボードが生成されます。問題は、ボードが生成されている間にdivが点滅するようにしたいのですが、generate_random_board（）関数が終了するまで点滅していません。そこにタイムアウト関数を入れて、GUIスレッドが制御と更新を取り戻すようにします。これは、テキスト/ボードの入力を変更するために働きますが、（forループの）フェーディング効果は変更しません。誰がなぜこれが、どのようにそれを解決するか知っていますか？繰り返しますが、 "generate_random_board（）"関数が実行されている間にdivを点滅させ、完了したら停止します。ありがとうございました！

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