Как сделать функцию асинхронной, используя JQuery Deferred?

Question

[Евгений]

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

На странице есть таблица с чекбоксами и кнопка, по нажатию на кнопку:

1. Должна отобразится gif картинка, показывающая, что процесс запустился.
2. Одновременно с этим, должен запуститься цикл each(), который соберет данные из отмеченных строк в массив numbers.
3. После завершения цикла, нужно скрыть gif и вывести результаты.

Я перепробовал много различных вариантов, но картинка у меня все равно блокируется, до тех пор, пока полностью не выполнится each()

$(function() {
	$( "#btnShow" ).button().click(function() { 

		$('.preloader').fadeIn(); 
		
		var checkedRowId=$("#table").yiiGridView("getChecked", "selectedRow");
		var numbers = new Array();
		
		$.each( checkedRowId, function( i, l ) {
			numbers.push(  $("#table").children('id="row' + l + '"').children(':nth-child(7)').text() );
		});
		
		console.log(numbers);
		$('.preloader').fadeOut();
	});
});

Answer 1

[Борис Беньковский]

судя по вот этой ссылке api.jquery.com/promise/#example-1

$("a").click(function() {

    $('.preloader').fadeIn();
    $('.preloader').promise().done(function(){
        // теперь картинка полностью появилась
        var defer = $.Deferred();
        defer.then(function() {
            // подсчет закончен, прячем картинку
            $('.preloader').fadeOut();           
        });
        
        setTimeout(function() {
            $("#result").append("Выполнилась долгая функция");
            defer.resolve();
        }, 2000) ;
       
    });
});

jsfiddle.net/xfzbcghz/2

Comments

[Борис Беньковский]

Господи, писать код на тостере боль и страдание... если это не заработает, сделайте jsfiddle и я постараюсь помочь

[Евгений]

Работает, но не совсем так. гиф-ка отображается и блокируется на время пока выполняется each().
Я сделал https://jsfiddle.net/xfzbcghz/

заменил each(), на setTimeout()

[Евгений]

Борис Беньковский: а на https://jsfiddle.net/ она появляется и сразу исчезает почему-то..

[Евгений]

Евгений: добавил функции showLoadingProcess() и hideLoadingProcess(), в идеале нужно использовать их.. Получается что тогда showLoadingProcess должна возвращать promise?

[Борис Беньковский]

jsfiddle.net/xfzbcghz/1
Вот, так работает. И в примерах в офф доках работает.
А у Вас не работает, потому что вы не внимательно читаете доки. Возвращаемый промис у любого jQuery объекта ( в данным случае $('.preloader').promise()) резолвится в тот момент, когда все действия, заданные именно этому jQuery объекту завершатся. Тоесть этот промис зарезолвится по истечению 400 мс ( дефолтное поведение для FadeIn()), поэтому Вы и наблюдаете пявление и исчезание. Чтобы получить промис, для какого-то кастомного действия вам нужен объект Deffered api.jquery.com/jQuery.Deferred (пример использования api.jquery.com/deferred.then) . Обновил ответ

[Евгений]

Борис Беньковский: Борис, спасибо большое за ваш ответ. Но я все равно не могу понять вот, что: ваш пример jsfiddle.net/xfzbcghz/2 работает, но работает он как очередь. Сначала отрабатывает fadeIn() и только потом функция указанная в setTimeout. Это можно проверить, если указать параметр, например fadeIn(5000). Возможно ли с помощью Deferred запустить эти функции одновременно, чтобы они выполнялись асинхронно?

[Борис Беньковский]

Да, можно поиграться например вот так jsfiddle.net/xfzbcghz/3
setTimeout всеравно нужен ( не внутренний, внутренний просто имитация sleep(), я про внешний ) потому что, чтобы код выполнялся паралельно с прятанием картинки нужна асинхронно его запустить.