Как отключить асинхронность в JS?

Question

[Issue]

Есть некая последовательность действий, которую нужно выполнить при нажатии кнопки "Показать". Ошибок не выводит, запрос возвращает. В основе функции jQuery.ajax с параметром async: false. Не получается сделать так, что бы при нажатии кнопки вывелась надпись о загрузке. Сейчас при нажатии кнопки ничего не происходит, пока не придет ответ сервера. А потом уже делает остальные действия. Часть кода перед отправкой запроса вообще не выполняется, пока запрос не придет...

'use strict';
$(document).ready(function($){
	// Нажатие кнопки "показать"
	$('.view_rating').on('click', function(e) {
		var rating_list = $('.rating_list');
		hide_message(rating_list);
		show_message(rating_list, 'Загрузка...', false);
		var result = load_json({
			action: 'view_rating',
			keywords: get_keywords(),
		});
		if (result == null){
			show_message(rating_list, 'Не удалось получить данные...', false);
		} else {
			hide_message(rating_list);
			show_result(rating_list, result);
		}
	});
});

Comments

[WbICHA]

Сейчас при нажатии кнопки ничего не происходит, пока не придет ответ сервера. А потом уже делает остальные действия. Часть кода перед отправкой запроса вообще не выполняется, пока запрос не придет...

Так ты же сам отключил асинхронность...
Ох уж эти любители стрелять себе в ногу.

[calculator212]

по описанию выглядит так, что вам наоборот нужна асинхронность, т.к. это примерно так выглядит, что сначала выполняется запрос на сервер, и т.к. все должно выполнятся последовательно, то код ждет ответа от сервера и только потом идет дальше или я что то не так понял?

[Issue]

WbICHA, Мне не нужна асинхронность. Мне нужно что бы код выполнялся в строгой последовательности...

[Lynn «Кофеман»]

> выполнялся в строгой последовательности
а для этого придумали Promise и async/await

[WbICHA]

Issue, если ты не понимаешь что такое асинхронность, как она работает и как с ней работать, то тут уж извините.

[Issue]

Lynn «Кофеман», Можно пример async/await? Я уже пробовал, но ничего не получилось, т.к. это работает только в классе. А у меня обычный файл с набором функций, второй файл - оператор этими функциями. Promise - не вариант, усложняет...

[WbICHA]

Issue,

т.к. это работает только в классе.

????????????

[Алексей Дубровин]

Issue, https://learn.javascript.ru/async-await

[Inviz Custos]

Можно пример async/await?

https://learn.javascript.ru/async-await

Promise - не вариант, усложняет

То, что призвано упростить жизнь, Вам ее "усложняет"?
"Не вариант" - это пытаться что-то делать не умея программировать.

[Issue]

Mellorn, Действительно! Благодарю за разъяснение. Но мне все еще не понятно, как вывести сообщение перед отправкой запроса, и как убрать сообщение после получения ответа сервера...

[GrayHorse]

Элементарные (базовые) вещи, которые делаются с async/await и fetch. Я бы даже переписал этот говнокод 10 десятилетней давности, но я не вижу, чтобы мой предыдущий ответ был отмечен, как решение, значит, — не надо.

Ну, хотя бы фразы, что в JS ужасная работа с ассинхронным кодом, нет.

[GrayHorse]

Кстати, сообщение не показывается, т.к. страница на время запроса тупо фризится из-за синхронного XMLHttpRequest.
https://learn.javascript.ru/event-loop

Можно даже "пофиксить" это разделив таску на две, добавив async коллбеку и await new Promise(resolve => setTimeout(resolve)); перед строкой с load_json.

[GrayHorse]

Т.е. хоть тема и называется "Как отключить асинхронность в JS?" по сути автор как раз таки и отключил асинхронность на время запроса, от чего и страдает.

Т.к. изменения DOM (добавление текста "Загрузка") ждут пока завершится текущая макро-задача, но ее заблокировал синхронный запрос, а после него в рамках этой же таски предыдущие изменения DOM перетираются новыми.

Answer 1

[Владимир]

Никак не отключить асинхронность, яваскрипт однопоточный, асинхронный.
Все коллбеки, fetch и многое другое выполняются асинхронно.
Вы привели кусок кода по которому читающий должен чудным образом догадаться что происходит например внутри hide_message, show_message, load_json
Основной вопрос к load_json, что эта функция возвращает?
Если Promise, то почитайте https://habr.com/ru/company/vk/blog/269465/
Ну и судя по вопросу вам не помешает просто почитать от корки до корки
https://learn.javascript.ru/

Comments

[Issue]

Функции говорят сами за себя:

1. hide_message - скрыть сообщение
   
2. show_message - показать сообщение
   
3. load_json - загрузить JSON. Функция принимает объект и передает его jQuery.ajax в data
   

[Владимир]

Issue, В документации у $.ajax по цепочке вызываются методы done fail alwais

$.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

https://api.jquery.com/jquery.ajax/

[GrayHorse]

Никак не отключить асинхронность, яваскрипт однопоточный, асинхронный.

Ну, например, for (let i = 0; i < 5_000_000_000; i++) {} вполне себе "отлючает" любую асинхронность путем фриза всего сайта, что и происходит при синхронном XMLHttpRequest.

[Владимир]

GrayHorse, Приведите пример синхронного XMLHttpRequest, я чет не нашел.
На всякий приведу ссылку на документацию с примером обработки результата
https://developer.mozilla.org/en-US/docs/Web/API/X...

[GrayHorse]

Я даже засомневался в своих словах (см. мой ответ и комментарии под вопросом).

Собственно:
https://javascript.info/xmlhttprequest#synchronous...

let element = document.querySelector("h1");
let xhr = new XMLHttpRequest();
xhr.open("GET", "/", false);
element.textContent = "1. " + new Date();
xhr.send();
element.textContent = "2. " + new Date();
console.log(xhr.response.slice(0, 50));

Проверил, был прав на 100 %.

Троттлинг только включить в консоли надо, либо заменить ссылку на то, что качается не слишком быстро, для лучшего эффекта.

[GrayHorse]

Кстати, в Firefox element.textContent = "1. " + new Date(); все же "отработает", в отличии от Chromium браузеров.
Но сайт зависает на время запроса в любом случае.

[Владимир]

GrayHorse, Увидел, спасибо.
https://jsfiddle.net/safknomy/

Answer 2

[GrayHorse]

Как отключить асинхронность в JS?

Например, с помощью синхронного XMLHttpRequest, что в приведенном примере кода как раз таки и сделано.
Всё (весь коллбек на событие клика) выполняется синхронно в рамках одной макро-задачи.

Т.е., внезапно, наоборот, — чтобы все работало, как задумано, надо включить асинхронность, а, точнее, не выключать ее. Ибо изменения в DOM происходят после завершения макро-задачи.

Первое изменение DOM (вывод текста загрузки) затирается сразу же изменением DOM, которое выводит данные полученного JSON.

И первое изменение DOM не может отрендериться, т.к. эвент луп заблокирован синхронным запросом. Оно ждет завершение запроса, а после него уже происходит другое, затирающее изменение.