Диалоговое окно jQuery не закрывается до выполнения функции

Question

Я использую диалоговое окно jquery, чтобы предупредить пользователя об удалении записи в таблице. Ниже мой код:

$('#deletebutton').click(function() { 
    if($(this).attr('disabled')=='disabled'){ 
     //do nothing 
    } 
    else{ 
     var isDeleteYes = false; 
     $('#delete-confirm').dialog({ 
        height : 150, 
        width : 400, 
        autoOpen : true, 
        close: function(event, ui) { 
         //alert(closed) 
        }, 
        buttons : { 
         "Yes" : function() { 
          isDeleteYes = true; 
          $(this).dialog("close"); 
          deleteFunction(); 

         }, 
         "No" : function() { 
            isDeleteYes=false; 
            $(this).dialog("close"); 
           } 
        }, 
        title : "Confirm Delete", 
        resizable : false, 
        modal : true, 
        overlay : { 
         opacity : 0.5, 
         background : "black" 
        } 
       }); 


    } 
}); 
function deleteFunction(){ 
    /* 
    * 
    * Logic for delete 
    * 
    */ 

} 

Проблема заключается в том, что в ДА Кнопка я закрываю диалог перед вызовом функции deleteFunction(). Но он не закрывается, пока функция не завершит выполнение. Предупреждение в функции закрытия появляется, как только я нажимаю ДА или НЕТ. Но диалог не закрывается в пользовательском интерфейсе.

Answer 1

Из вашего описания это происходит из-за того, что вы выполняете синхронную операцию в deleteFunction (что означает, что один скрипт будет запущен после одного, если асинхронные средства будут выполняться параллельно).

$(this).dialog("close"); сценарий будет обновлять только дом, чтобы скрыть элемент, чтобы скрыть элемент из вида, который должен произойти в браузере.

В браузере функции javascript и repaint/reflow работают в одном и том же потоке (но синхронно), что означает, что он будет запускаться после завершения предыдущего скрипта, поэтому, хотя диалог помечен, чтобы скрыть его, он не будет скрыт от представление, если текущее выполнение сценария не завершено, и браузер получает возможность выполнить повторный поток.

Одно решение Сокращаются проблемы является использование тайм-аут, если вы хотите, чтобы выполнить функцию удаления в асинхронном режиме, как показано ниже

"Yes": function() { 
    isDeleteYes = true; 
    $(this).dialog("close"); 
    setTimeout(deleteFunction, 1); 

}, 

Answer 2

Если вы звоните Ajax в называемом методе (deleteFunction), то сделайте это «async: true». Это отлично работает для меня. Надеюсь, это будет работа.