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] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .

@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