Как выполнить одну функцию javasript после другой?

Question

[Partizanin]

Есть функция "changedListener" внутри которой вызывается еще 2 "changContent" и "count" !
Проблема в том что после того как я вызываю функцию "changContent" после ее выполнения должна выполниться функция "count" но когда я все это дебажил то увидел что функция "count" вызывается не после функции "changContent" а вовремя!
Функция "changContent" не успевает выполнится до конца и во время ее выполнения сразу вызывается следующая функция "count" и получается что контент еще не успел измениться как функция "count" уже что-то считает!
Подскажите как можно исправить это недоразумение !

function callToServer(request) {
    var myData = {"operationCall": request};
    var defer = $.Deferred();
    $.ajax({
        type: "GET",
        url: "/ConventerServlet",
        data: {jsonData: JSON.stringify(myData)},
        dataType: "json",

        //if received a response from the server
        success: function (jsonData) {

        },

        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        },

        complete: function () {

        }

    }).done(function (data) {
        defer.resolve(data);
    }).fail(function (xhr, status, errorThrown) {
        alert("Sorry, there was a problem!");
        console.log("Error: " + errorThrown);
        console.log("Status: " + status);
        console.dir(xhr);
    });
    return defer.promise();
}

function changedListener(object) {

    if (object.type == "select-one") {

        console.log("ChangeListener:" + object.value);

        changContent(object.value, "default", "changeCourse");

        count();

    } else if (object.type == "button") {

        console.log("ChangeListener:" + object.id);


        changContent($("#selectExchange").val(), object.id, "changeOperation");


        buttonOperation(object.id, "disabled");


    } else if (object.type == "text") {

        validation();

    }

    function validation() {

        var booll = ""/*parserFloat()*/;

        var input = document.getElementById("inputValue"),
            inputButton = document.getElementById("inputButton");

        if (!input.checkValidity()) {

            inputButton.click();

            booll = false;
        } else {
            booll = true;
        }

        if (booll) {
            count();
        } else {
            /* setDefaultValues();*/
        }

        /*changeIcon(booll); dont work*/

        return booll;

    }

}

Answer 1

[Евгений Петров]

Для вызова после исполнения асинхронного кода придуман конструктор Promise.
В jQuery с целью кроссбраузерной реализации существует объект Deffered.

function one (request) {
	var defer = $/Deferred();

	$.ajax({
		...
	}).done(function (data) {
		defer.resolve(data);
	}).done(function () {
		defer.resolve();
	});
	return defer.promise();
}

one.then(function (data) {
	if (data) {
		//Запрос успешен
	} else {
		//Запрос провален
	}
});

Comments

[Partizanin]

После того как добавил объект Deffered и вставил метод "count" в метод then, перестали нажиматься кнопки может я не так что-то сделал ?
вообще мне нужно что бы метод "count" исполнялся после метода "changContent"

<b>
changContent($("#selectExchange").val(), object.id, "changeOperation").then(count());
 </b>

 <b>   var defer = $/Deferred();
</b>
    if (action == "changeCourse") {

        changRows(exchange, operation);

    } else {
        changOperation(exchange, operation);
    }

    function changOperation(exchange, operation) {

        callToServer(exchange).then(function (data) {

            /** @namespace rows[index].sellCourse */

            var rows = data.rows;

            for (var i = 0; i < rows.length; i++) {

                $('#personDataTable').find('li').each(function (index) {
//todo edith if method and remove duplicate code
                    if (operation === "buy") {
                        $(this).find('input:last').val(rows[index].buyCourse);
                    } else {
                        $(this).find('input:last').val(rows[index].sellCourse);
                    }

                });


            }
<b>
        }).done(function(){
            defer.resolve();
        });
        return defer.promise();
</b>
    }


    function changRows(exchange, operation) {

        callToServer(exchange).then(function (data) {

            /** @namespace rows[index].sellCourse */

            var rows = data.rows;

            for (var i = 0; i < rows.length; i++) {

                $('#personDataTable').find('li').each(function (index) {
//todo edith if method and remove duplicate code
                    if (operation === "buy") {
                        $(this).find('input:last').val(rows[index].buyCourse);
                    } else {
                        $(this).find('input:last').val(rows[index].sellCourse);
                    }
                    $(this).find('label').text(rows[index].id.substr(3, 5));
                });


            }
<b>
        }).done(function(){
            defer.resolve();
        });

        return defer.promise();
</b>
    }

}

[Евгений Петров]

В then() должна стоять ссылка на функцию, а не её вызов.

changContent($('#selectExchange').val(), object.id, 'changOperation').then(count);

[Partizanin]

Евгений Петров:

вот так что-то не катит

changContent($("#selectExchange").val(), object.id, "changeOperation").then(function(){
            count();
        });

я просто не могу одну и ту же реализацию копировать внутрь функции then я просто функцию "count" не только здесь использую, хотелось бы не писать одно и тоже а просто вызвать уже готовую!

[Евгений Петров]

Вы внутри функции changContent должны сделать то, что я написал:

function changContent (/*тут ваши аргументы*/) {
	var defer = $/Deferred();

	//тут что-то делаем и после всего резолвим
	defer.resolve();

	return defer.promise();
}

[Partizanin]

Евгений Петров: спасибо получилось, ох уж оно все закручено....

[Евгений Петров]

Partizanin: Или можете прислушаться к совету Jeiwan — передать callback-функцию дополнительным параметром и вызвать эту функцию вместо создания и резолва объекта.

Answer 2

[Jeiwan]

Передавать count в качестве коллбэка в changeContent и вызывать её там по завершении. В changeContent, по видимому, что-то асинхронное происходит.

Answer 3

[Rsa97]

Несмотря на то, что функции изменения страницы (.append, .html и т.д.) выполняются синхронно, само изменение DOM-модели в webkit-браузерах является асинхронной операцией. Самый простой способ обхода - задержка перед count() или использование setInterval().

Comments

[Евгений Петров]

Мне казалось, что это относится к изменениям размера и положения, а дерево меняется синхронно. Впрочем, не могу ничего утверждать в данном случае.