WordPress Как быстро получить Ajax при нажатии кнопки

Question

Я использую плагин " Post Like System ", и у меня есть этот скрипт ниже, чтобы ajax происходил, когда пользователи нажимали кнопку Like.

Когда я нажимал кнопку,заполнение иконки сердца + счет занимает 2 или 3 секунды.

Так есть ли способ заполнить значок сердца и сосчитать до запроса Ajax?

Наши пользователи очень злы за эту задержку :(

Примечание: я использовал хостинг Siteground!

simple-like.js

(function ($) {
    'use strict';
    $(document).on('click', '.sl-button', function () {
        var button = $(this);
        var post_id = button.attr('data-post-id');
        var security = button.attr('data-nonce');
        var iscomment = button.attr('data-iscomment');
        var allbuttons;
        if (iscomment === '1') { /* Comments can have same id */
            allbuttons = $('.sl-comment-button-' + post_id);
        } else {
            allbuttons = $('.sl-button-' + post_id);
        }
        var loader = allbuttons.next('#sl-loader');
        if (post_id !== '') {
            $.ajax({
                type: 'POST',
                url: simpleLikes.ajaxurl,
                data: {
                    action: 'process_simple_like',
                    post_id: post_id,
                    nonce: security,
                    is_comment: iscomment,
                    disabled : false
                },
                beforeSend: function () {
                    loader.html('&nbsp;<div class="loader">Loading...</div>');
                },
                success: function (response) {
                    var icon = response.icon;
                    var count = response.count;
                    allbuttons.html(icon + count);
                    if (response.status === 'unliked') {
                        var like_text = simpleLikes.like;
                        allbuttons.prop('title', like_text);
                        allbuttons.removeClass('liked');
                    } else {
                        var unlike_text = simpleLikes.unlike;
                        allbuttons.prop('title', unlike_text);
                        allbuttons.addClass('liked');
                    }
                    loader.empty();
                }
            });
        }
        return false;
    });
})(jQuery);

Answer 1

Что вы можете сделать, это изменить поведение кнопки без ajax, а затем отправить запрос ajax.

Например, если у кнопки есть класс «понравился», измените его на «unliked», а затем отправьте запрос ajax в отличие от,Если кнопка «не понравилась», сначала установите ее в «понравившийся», когда пользователь нажимает на нее, а затем отправьте запрос ajax.Конечно, это будет означать, что в случае сбоя ajax-запроса ваш пользователь не узнает об этом и не узнает, что его действие не учитывается, но мгновенное обновление состояния кнопки того стоит.

(function ($) {
    'use strict';
    $(document).on('click', '.sl-button', function () {
        var button = $(this);
        var post_id = button.attr('data-post-id');
        var security = button.attr('data-nonce');
        var iscomment = button.attr('data-iscomment');
        var allbuttons;
        if (iscomment === '1') { /* Comments can have same id */
            allbuttons = $('.sl-comment-button-' + post_id);
        } else {
            allbuttons = $('.sl-button-' + post_id);
        }

        // check if the button is liked, than mark it as unliked and vise versa
        if (allbuttons.hasClass('liked')) {
           var like_text = simpleLikes.like;
           allbuttons.prop('title', like_text);
           allbuttons.removeClass('liked');
        } else {
           var unlike_text = simpleLikes.unlike;
           allbuttons.prop('title', unlike_text);
           allbuttons.addClass('liked');
       }

        if (post_id !== '') {
            $.ajax({
                type: 'POST',
                url: simpleLikes.ajaxurl,
                data: {
                    action: 'process_simple_like',
                    post_id: post_id,
                    nonce: security,
                    is_comment: iscomment,
                    disabled : false
                }
            });
        }
        return false;
    });
})(jQuery);