javascript - 如何计算点击次数，然后发送带有该数字的 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);
        }
    });

所以我只为 10 次点击而不是 10 个请求发送 1 个 ajax 请求。

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