Bootstrap 对话框渲染延迟

Question

我遇到了 Bootstrap Dialog 的一个非常奇怪的行为由于某些原因，在下面提供的 foo 函数中，对话框不会立即出现。渲染延迟到到达行 $.get(... 的那一刻。知道为什么会发生这种情况吗？

function = foo()
{
   $rows.each(function (i, row) 
   {
       var $row = $(row);
       if (something_is_wrong()) 
       {
           alert_error('Something is wrong', $form, '');
           return;
       }
       // Some other code           
    });
    // The Bootstrap modal dialog shows up when reaching the point below !!!
    $.get('/sending_order_notification/' + legal_entity_own_id, function(response)
    {
        BootstrapDialog.show({ ...
        // ...
     });
}


function alert_error(message, $current_form, function_name)
{
    if ($current_form != undefined)
        $current_form.modal('hide');

    BootstrapDialog.show(
    {
        type: BootstrapDialog.TYPE_DANGER,
        title: 'Ошибка',
        message: message,
        draggable: true,
        buttons: [{
            label: 'OK',
            action: function(dialogItself) {
                dialogItself.close();
                if (function_name != undefined)
                    $.post('/send_error_report/', function_name);
            }
        }]
    });  
}

更新受 Maximus 的启发，我选择了以下对我有用的解决方法。但这不是一个干净的解决方案，因为即使它变得毫无意义我也必须继续循环。

function = foo()
    {
       var bad_condition_flg = false;
       $rows.each(function (i, row) 
       {
           var $row = $(row);
           if (something_is_wrong()) 
           {
               bad_condition_flg = true;
           }
           // Some other code           
        });
        if (bad_condition_flg);
        {
           alert_errr(...);  
           return;
         }
     }

Answer 1

为了显示对话框，浏览器必须执行重绘。仅当调用堆栈中没有任何内容时才可能重绘。所以对话框只会在 foo 完成执行后显示。使用调试器时有点不同，因为有时在断点处停止会给浏览器重新绘制时间，并且对话框可能会在调用堆栈为空之前显示。

Bootstrap 对话框渲染延迟

Bootstrap dialog rendering postpode

javascript

bootstrap-dialog