Анимация на кнопке во время вызова AJAX.Но когда это займет мало? - PullRequest
Новая
       57

Анимация на кнопке во время вызова AJAX.Но когда это займет мало?

0 голосов
/ 22 сентября 2019

У меня есть кнопка на HTML-странице.Я нажимаю на него, и Ajax-вызов отправляется.Текст на кнопке заменяется анимированными точками во время разговора.Проблема в том, что иногда вызов занимает несколько секунд, а иногда 0,5 или 1 секунду. Когда это занимает 0,5 или 1 секунду, UX становится плохим, потому что текст на кнопке заменяется анимированными точками, а затем возвращается.Пользователь видит, что 2 мигания происходят слишком быстро.

Как я могу улучшить это?

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019

Вы должны присоединиться к вашему запросу вызова с некоторой функцией тайм-аута и дождаться завершения обоих.Реализация на чистом JS может выглядеть следующим образом:

  1. Обернуть ваш запрос xhr в Promise 
var makeRequest = function (url, method) {

    // Create the XHR request
    var request = new XMLHttpRequest();

    // Return it as a Promise
    return new Promise(function (resolve, reject) {

        // Setup our listener to process compeleted requests
        request.onreadystatechange = function () {

            // Only run if the request is complete
            if (request.readyState !== 4) return;

            // Process the response
            if (request.status >= 200 && request.status < 300) {
                // If successful
                resolve(request);
            } else {
                // If failed
                reject({
                    status: request.status,
                    statusText: request.statusText
                });
            }

        };

        // Setup our HTTP request
        request.open(method || 'GET', url, true);

        // Send the request
        request.send();

    });
};
Создать некоторую функцию ожидания 

var justWait = function(interval) {
   return new Promise(resolve => {
      setTimeout(resolve, interval);
   })
}
Используйте их вместе 
// apply animation here
Promise.all([
    makeRequest('https://some/url/here', 'GET'),
    justWait(1000)
]).then(res => {
    // remove animation here
})
  .catch(err => {
    // remove animation here also in case of error
  });

Это гарантирует, что ваша анимация будет длиться не менее интервала justWait, но если запрос xhr длится дольше - он будет ждать до его завершения.

Если вы используете библиотеку rxjs, вы можете использовать zip вместо Promise.all, однако общая идея остается прежней.

0 голосов
/ 22 сентября 2019

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

let button_pressed = (e)=>{
    let button = document.getElementById('button_id');
    button.ajaxStarted = new Date().valueOf();

    animate_waiting(); // start your dot animation effect

    var XHR;
    XHR = new XMLHttpRequest();
    XHR.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200){ // done
            let diff = new Date().valueOf() - document.getElementById('button_id').ajaxStarted;
            if(diff < (1000 * 3)){ // three seconds have not yet passed
                setTimeout(()=>{
                    call_finished(); // now finish animating and post content
                }, (1000 * 3) - diff);
            }else{ // three seconds have passed
                call_finished(); // now finish animating and post content
            }
        }
    }
    XHR.open("GET", "/your_ajax_call?foo=bar", true);
    XHR.send();
}
...