Выполнение Javascript-кода задерживается

Question

Я назвал свою функцию ниже на событие click. В основном этот код занимает некоторое время (приблизительно 200 мс) для выполнения в браузере из-за того, что я запускаю событие click в дереве jquery.

function showAsset() 
{ 
     $(".err").html("Please wait . . .") 
     $(".err").css('display','block') 
     $(".err").css('background','orange') 
     v=$("#asset_details").val() 
     v=v.split("###") 
     v1=v[0].split("-") 
//Upto this block should be executed first 

     //Jquery Tree block starts 
     $("#navigation ."+v1+" div").click() 
     $("#navigation ."+v[1]+" div").click() 
     $("#navigation table tr:contains('"+v[0]+"')").css({'background':'#FFF82A'}) 
     $('html, body').animate({ 
     'scrollTop' :($("#navigation table tr:contains('"+v[0]+"')").position().top-5) 
    }); 
     //Jquery Tree block ends 
} 

Поэтому, чтобы проинструктировать моих пользователей об этой загрузке, я показываю «пожалуйста, подождите ...». сообщение при запуске вызова функции. Но это сообщение отображается после полного выполнения вызова функции.

Мой вопрос, почему начало блока также задерживается, когда я вызываю эту функцию. Я поместил блок дерева JQuery в нижней части функции. Но общий код выполняется одновременно.

Есть ли способ отделить это исполнение.

Answer 1

Вы можете использовать setTimeout, чтобы отделить ваше исполнение.

Вызывает функцию или выполняет фрагмент кода после указанной задержки.

source

Первый блок без setTimeout выполняется и после setTimeout выполняется в отдельной области.

function showAsset() { 
    $(".err").html("Please wait . . .") 
    $(".err").css('display', 'block') 
    $(".err").css('background', 'orange') 
    v = $("#asset_details").val() 
    v = v.split("###") 
    v1 = v[0].split("-") 
    //Upto this block should be executed first 

    //Jquery Tree block starts 

    setTimeout(function() { 
    $("#navigation ." + v1 + " div").click() 
    $("#navigation ." + v[1] + " div").click() 
    $("#navigation table tr:contains('" + v[0] + "')").css({ 
     'background': '#FFF82A' 
    }) 
    $('html, body').animate({ 
     'scrollTop': ($("#navigation table tr:contains('" + v[0] + "')").position().top - 5) 
    }); 
    //Jquery Tree block ends 
    }, 0); 
}