如何计算点击次数，然后发送带有该数字的 ajax 请求？

Question

I have a button that I want to run a function that will make an ajax call and update click_count on my db.

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

Now, I want to simplify ajax call when user click button quickly. For example, if user click the button 10 times quickly, i will send request with param like:

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

So I just send 1 ajax request for 10 clicks instead of 10 requests.

Answer 1

There are some libs for that, but this will work with 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

You can work with a timeout and send the request after the user stopped clicking for a specific time.

1. Define a variable outside: var timeout = null;
2. Use this code within you click handler (you can play around with the 500ms):

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);