Последовательность нескольких функций на jQuery

0

У меня есть функция, которая хранит несколько значений из HTML-формы, и она должна работать индивидуально, чтобы хранить эту информацию в любой ситуации, в которой я нуждаюсь (т.е. перед вставкой в БД или до публикации информации о БД...)

Мне нужно иметь возможность сказать системе выполнить эту функцию ('storeValues'), а затем выполнить любой другой (может быть 'createNewClass', 'updateExistingClass'... что угодно).

Как я могу это упорядочить? Я попробовал здесь сначала сохранить значения и, КОГДА СОВЕРШЕННО, выполнить еще одну функцию, омывающую значение, но он говорит: "storeValues () не определен", и он определен:

$('.tableClassHeader').on('click', '.createClass', function(){
    storeValues().promise().done(function(){
        createNewClass();
    });
});

function storeValues(){
    cl_year = $('.newClassForm').find('select[name=cl_year]').val();
    cl_course = $('.newClassForm').find('select[name=cl_course]').val();
    }

function createNewClass(){
    alert(cl_year);}

Я имею в виду, что функция storeValues ДОЛЖНА БЫТЬ отдельной функцией с возможностью вызова из любого другого места, я знаю, что эту проблему можно решить, выполнив "createNewClass" из функции "storeValues", но будут моменты, которые мне нужно выполнить "updateClass" после "storeValues", а не "createNewClass"

  • 0
    Когда вы говорите «может быть», вы основываете это на том, установлены ли значения или нет?
  • 0
    Под этим я подразумеваю, что это ДОЛЖНА БЫТЬ отдельная функция с возможностью вызова из любого другого места, я знаю, что эту проблему можно решить, выполнив «createNewClass» из функции «storeValues», но будут моменты, когда мне нужно выполнить «updateClass» после «storeValues», а не «createNewClass»
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Вы можете использовать обратный вызов, подобный этому, если ваши storeValues не синхронны, как в вашем примере:

$('.tableClassHeader').on('click', '.createClass', function(){
    storeValues(createNewClass);
});

function storeValues(callback){
    cl_year = $('.newClassForm').find('select[name=cl_year]').val();
    cl_course = $('.newClassForm').find('select[name=cl_course]').val();
    callback();
}

function createNewClass(){
    alert(cl_year);
}

Если это происходит синхронно, просто звоню createNewClass после storeValues достаточно.

Что это делает:

  • предлагает вам возможность передать функцию выбора в storeValues
  • внутри storeValues вызывает функцию обратного вызова, переданную как параметр

Если вам нужно выполнить свою функцию с другой областью, вы можете использовать call или apply.

Другой способ сделать это, без обратных вызовов, будет использовать

http://api.jquery.com/promise/
http://api.jquery.com/jQuery.when/
http://api.jquery.com/deferred.promise/

Пример, как видно здесь http://jsfiddle.net/47fXF/1/:

$('.tableClassHeader').on('click', '.createClass', function(){
    $.when(storeValues()).then(createNewClass);
});

function storeValues(){
    var dfd = new jQuery.Deferred();
    setTimeout(function(){
        console.log('storing values');
        cl_year = $('.newClassForm').find('select[name=cl_year]').val();
        cl_course = $('.newClassForm').find('select[name=cl_course]').val();
        dfd.resolve();
    }, 1000);

    return dfd.promise();
}

function createNewClass(){
    alert("trololo");
}

Добавлен параметр setTimeout для имитации асинхронности.

Если ваш storeValues делает только один запрос ajax с использованием jQuery, вы можете вернуть его напрямую, как показано в документации API.

Также обязательно вызовите resolve(), reject() соответствующим образом.

Поделиться
  • 0
    Я собираюсь попробовать, я скажу тебе тогда. благодарю вас.
  • 1
    Нет необходимости использовать обратный вызов для синхронного выполнения. Это анти паттерн.
Показать ещё 5 комментариев
0

Назовите это. он сначала вызывает storeValues после выполнения функции createNewClass

$('.tableClassHeader').on('click', '.createClass', function(){

    storeValues(function() {
        createNewClass();
    });

});

function storeValues(callback){
    cl_year = $('.newClassForm').find('select[name=cl_year]').val();
    cl_course = $('.newClassForm').find('select[name=cl_course]').val();
    callback();
}
Поделиться
  • 0
    Значение самого элемента select содержит правильное значение. Зачем ему нужно ориентироваться на выбранный вариант?
  • 0
    спасибо, в любом случае .val () всегда был для меня правильным, он хранит атрибут значения из выбранной опции
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню