Flush в js

@Inzhiner · Регистрация: 05.04.2014

Студворк — интернет-сервис помощи студентам

Привет читателям!
Помогите решить "задачку":
1 нажимаем кнопку
2 на странице выводится картинка(анимация)
3 формируется результат
4 картинка уберается
5 выводится результат

Есть код :

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   
...
 $(".button_up").click(function(){
        
   var dann = $.map( $(":checkbox:checked"), function(el){ return $(el).val(); });
   var dann_d = $.map( $(".datepickerTimeField"), function(tx){ return $(tx).val(); });
   //alert(dann_d);
   if (dann_d==','){alert('Интервал периода не выбран!');} else { 
        //вывести эту картинку
                $.ajax({
              success: function(data){
                    $(".result_tabl").html("<img src='img/ajax_loader_blue.gif'>");
                   //alert (event+" "+id);
                   }   
            });
        //пока обрабатывается результат ниже
            
    $.ajax({
                type: "POST",
                url:"script/tabls.php",
                data:{dann: dann, dann_d:dann_d},
                success: function(data){
                    $(".result_tabl").html(data);
                   }
            });        
   }
});

На данном этапе, после нажатия кнопки, страница зависает(идут вычесления). Потом выводится картинка - сразу подменяется результатом.

Добавлено через 28 минут
полный код

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
   $(function(){
    $(".button_up").click(function(){
        
   var dann = $.map( $(":checkbox:checked"), function(el){ return $(el).val(); });
   var dann_d = $.map( $(".datepickerTimeField"), function(tx){ return $(tx).val(); });
   //alert(dann_d);
   if (dann_d==','){alert('Интервал периода не выбран!');} else { 
                $.ajax({
              success: function(data){
                    $(".result_tabl").html("<img src='img/ajax_loader_blue.gif'>");
                   
                   }   
            });    
    $.ajax({
                type: "POST",
                url:"script/tabls.php",
                data:{dann: dann, dann_d:dann_d},
                success: function(data){
                    $(".result_tabl").html(data);
                  
                   }
            });        
   }
});  
    });
</script>

@vettel · 11.11.2016, 15:51

Inzhiner, вывод картинки-спиннера нужно выполнять не в success,а, скажем, beforeSend.

@Inzhiner · 11.11.2016, 16:05 **[ТС]**

Спасибо!

@vettel · 11.11.2016, 16:19

Inzhiner, и еще - зачем вы 2 отдельных запроса делаете?

JavaScript
1
2
3
4
5
6
$.ajax({
              success: function(data){
                    $(".result_tabl").html("<img src='img/ajax_loader_blue.gif'>");
                   
                   }   
            });

Куда этот запрос без url идет? Я догадываюсь, что на ту же страницу, где выполняется код (хотя точно утверждать не могу).
В вашем случае, на мой взгляд, рационально будет все в одном запросе делать:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
                type: "POST",
                url:"script/tabls.php",
                data:{dann: dann, dann_d:dann_d},
                beforeSend: function() {
                      $(".result_tabl").html("<img src='img/ajax_loader_blue.gif'>");
                },
                success: function(data){
                    $(".result_tabl").html(data);
                  
                   }
            });

@Inzhiner · 11.11.2016, 16:34 **[ТС]**

vettel,
Я думал что по анологии с php в js есть flush();.
Думал что выполнит мне первый запрос(выведет на текущую страницу анимацию "ожидания" )
потом будет выполнять второй запрос.(отсылает параметры на обработку в "script/tabls.php" )
После обработки второго(получил результат), заменяю картинку на результат.

@vettel · 11.11.2016, 16:45

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

Новые блоги и статьи Все статьи Все блоги /
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .

@vettel 84 / 84 / 41 Регистрация: 14.02.2015 Сообщений: 320
	11.11.2016, 15:51
	Inzhiner, вывод картинки-спиннера нужно выполнять не в success,а, скажем, beforeSend. 1

@Inzhiner 0 / 0 / 0 Регистрация: 05.04.2014 Сообщений: 23
	11.11.2016, 16:05 [ТС]
	Спасибо! 0

@Inzhiner 0 / 0 / 0 Регистрация: 05.04.2014 Сообщений: 23
	11.11.2016, 16:34 [ТС]
	vettel, Я думал что по анологии с php в js есть flush();. Думал что выполнит мне первый запрос(выведет на текущую страницу анимацию "ожидания" ) потом будет выполнять второй запрос.(отсылает параметры на обработку в "script/tabls.php" ) После обработки второго(получил результат), заменяю картинку на результат. 0

@vettel 84 / 84 / 41 Регистрация: 14.02.2015 Сообщений: 320
	11.11.2016, 16:45
	Inzhiner, такого нет. В вашем изначальном коде у вас есть 2 отдельных асинхронных запроса, и первый отправляется непонятно куда. Поэтому я и предложил объединить их в один 0