Почему изображение загрузчика не отображается?

Question

У меня есть функция, которая занимает некоторое время, чтобы завершить процесс. Поэтому я планирую отображать образ процесса, пока он не завершится.

Пожалуйста, взгляните на образец здесь. Когда пользователь нажмет на кнопку, процесс начнется. Здесь я устанавливаю функцию setTimeout для задержки. Но образ обработки не отображается.

Sample Code

Если я помещаю код для скрытия изображения внутри функции SetTimeout она работает.

Но в действительности код, который также не работает.

Также я попытался с

$.when($("#loaderImg").show()).done(function(){ 
showSomeProcess() 
$("#loaderImg").hide(); 
}) 

Так, пожалуйста, помогите мне с этим примером кода. Я не понимаю, почему изображение обработки не отображается.

Answer 1

Использование обещания решит вашу проблему. Обновленная скрипка также https://jsfiddle.net/3espztjw/5/

$("#startProcess").click(function(){ 
    $("#loaderImg").show(); 
    $.when(showSomeProcess()).then(function(){ 
     $("#loaderImg").hide(); 
    }) 
}); 
var showSomeProcess=function(){ 
    var deferred = jQuery.Deferred() 
    $("#progress").html("Process started"); 
    setTimeout(function(){ 
     $("#progress").html("Process end"); 
     deferred.resolve(); 
    },3000); 
    return deferred.promise(); 
} 

Answer 2

Технически, функция setTimeout() не выполняется в потоке. Он прерывает синхронную последовательность. Это не означает, что он асинхронен и работает в отдельном потоке. Он просто выполняет его за пределами последовательного порядка. Таким образом, функция hide() выполняется до того, как задача фактически завершена, и мы не видим загрузчика.

Он асинхронный (частично), но определенно не работает на параллельном потоке.

Так, что-то вроде этого кода обыкновению на самом деле работает, как ожидалось:

$("#loaderImg").show(); 
    setTimeout(function(){ 
     $("#progress").html("Process end"); 
    },3000); 
$("#loaderImg").hide(); 

Шкура функция будет вызвана, прежде чем 3 секунды будут завершены.

Это может помочь, если вы хотите, чтобы скрыть загрузчик после 3secs:

$("#loaderImg").show(); 
    setTimeout(function(){ 
     $("#progress").html("Process end"); 
     $("#loaderImg").hide(); 
    },3000); 

Кроме того, только потому, что setTimeout() бежит из синхронизации с последовательностью, не означает, что она повышает производительность, так как его работы в том же потоке ,

Пример, который не работает, как ожидалось:

$(function() { 
 
    $('div').html("Started"); 
 
    setTimeout(function(){ 
 
    $('div').html("Working"); 
 
    },3000); 
 
    $('div').html("Finished"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
</div>

Конечно, вы можете заметить, как последовательность идет в приведенном выше фрагменте кода.

Некоторые рабочий код:

$(function() { 
 
    $('div').html("Started"); 
 
    $('div').html("Working"); 
 
    setTimeout(function() { 
 
    $('div').html("Finished"); 
 
    }, 3000); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
</div>