Как сделать индикатор загрузки?

Question

[Max Ba]

Парни, как сделать загрузку вот какого типа. (JQUERY стандартная функция Ajax)
При нажатии на кнопку появляется надпись LOADING... Тут всё просто. beforeSend: function(){}
НО!
тк сервер может ответить мгновенно, а может и подумать, то хотел бы сделать, чтобы надпись LOADING горела всегда не менее 3х секунд. То есть от 3х до ответа сервера.
Это реально сделать, или нужно таймеры и функции прописывать?

Comments

[Max Ba]

Идеальным было бы сделать sleep(3) на стороне PHP. Но это не тот выход :)

Answer 1

[Flying]

Используйте Promise.all для двух промисов:

• В первом будет загрузка (jQuery.ajax() возвращает jqXHR в котором есть метод always, в нём и будете вызывать resolve())
  
• Во втором будет setTimeout() с убиранием надписи и вызовом resolve() с нужной вам задержкой
  

Answer 2

[Ihor Bratukh]

Так? Codepen

$('body').text('Loading...');
makeAjax(function(data) {
	$('body').html(function() {
		var result = '';
		for (var user in data) {
			result += '<div>'+ data[user].name + ' (' + data[user].email +')</div>';
		}
		return result;
	}());
});

function makeAjax(done) {
	return $.ajax({
		url: 'https://jsonplaceholder.typicode.com/users',
		method: 'GET',
		dataType: 'json',
		success: function(data) {
			setTimeout(function() {
				if (done) done(data);
			}, function(min, max) {
				return Math.random() * (max - min) + min
			}(2e3, 3e3));
		}
	});
}