JQuery анимация ожидания ajax (post) запроса

235

04 января 2020, 05:40

Уважаемые специалисты прошу помощи, помогите советом. Хочу сделать анимацию ожидания выполнения ajax запросов. В интернете советуют приблизительно следующий алгоритм:

simpleFunction() {
    startLoadingAnimation(); //отображает подложку с анимацией (описывать не буду)
    $.get("/ajaxtest.php" ............); //сам запрос
    stopLoadingAnimation(); //после выполнения скрывает анимацию
}
<input onclick="simpleFunction();">

Все вроде понятно, а что делать если у меня таких функции около 15-ти, в каждую добавлять эти два вызова функций отображения/скрытия анимации? А нельзя ли (чтобы не повторятся) сделать как-нибудь так?

animation(funct) {
     startLoadingAnimation(); //отображает подложку с анимацией
     eval(funct); //вызывает нужную функцию переданную как строку 
     stopLoadingAnimation(); //после выполнения скрывает анимацию
}
function editQuestion(param1) { ..... }
function addQuestion(param1, param2) { ..... }
//вызов функции, с передачей в качестве параметра наименование выполняемой функции 
<input onclick="animation(editQuestion('param1'));"> 
//вызов другой функции к примеру
<input onclick="animation(addQuestion('param1', 'param2'));">

Или как это сделать красивее? Я новичок сильно не ругайте, прошу совета

Answer 1

Если я правильно понял то тебе подойдет такой вариант.

function simpleFunction(param1, param2) {
  startLoadingAnimation();
  $.ajax({
    url: '/path/to/file',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {param1: 'value1'},
  })
  .done(function() {
    console.log("success");
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    stopLoadingAnimation();
    console.log("complete");
  });
}

Естественно, console.log() можно убрать.

Подробнее: здесь