Как я могу посчитать количество кликов и затем отправить запрос ajax с этим номером?

Question

У меня есть кнопка, для которой я хочу запустить функцию, которая сделает вызов ajax и обновит click_count на моей базе данных.

$.ajax({
        url: 'my_url'
        type: 'post',
        data: {id: 1},
        success: function(response){
            console.log(response.click_count);
        }
    });

Теперь я хочу упростить вызов ajax, когда пользователь быстро нажимает кнопку. Например, если пользователь щелкнет по кнопке 10 раз быстро, я отправлю запрос с параметрами, такими как:

$.ajax({
        url: 'my_url'
        type: 'post',
        data: {id: 1, click_count:10}, // click_count=10;
        success: function(response){
            console.log(response.click_count);
        }
    });

Поэтому я просто отправляю 1 запрос Ajax за 10 нажатий вместо 10 запросов.

Answer 1

Для этого есть несколько библиотек, но это будет работать с vanilla js.

var click_count = 0;
var click_timeout;
function countIt() {
   if( click_timeout ) {
       clearTimeout( click_timeout );
   }
   click_count ++;
   click_timeout = setTimeout( function() {
       $.ajax({
            url: 'my_url'
            type: 'post',
            data: {id: 1, click_count:click_count},;
            success: function(response){
                console.log(response.click_count);
            }
        });
       click_count = 0;
   }, 1000 ); // 1 Second for next click
}

Answer 2

Вы можете работать с таймаутом и отправить запрос после того, как пользователь перестал щелкать мышью в течение определенного времени.

1. Определить переменную снаружи: var timeout = null;
2. Используйте этот код вВы нажимаете обработчик (вы можете поиграть с 500 мс):

clearTimeout(timeout);

timeout = setTimeout(function () {
    $.ajax({
        url: 'my_url'
        type: 'post',
        data: {id: 1, click_count:10}, // click_count=10;
        success: function(response){
            console.log(response.click_count);
        }
    });
}, 500);