Question

我有一个简单的javascript计数器，只要用户单击右箭头按钮就会增加，当用户单击左箭头时会减少。我需要对PHP页面进行Ajax调用，将其保存在数据库中。我有两种工作方法，但都不理想。

方法＃1：我每次用户点击都会进行ajax调用。这里的问题是，有时用户可能会在一秒钟内单击右箭头5次。现在javascript开始拨打一堆电话而且无法跟上。它给客户端和服务器带来了不必要的负担。

方法＃2：我只进行调用并在用户单击以关闭包含计数器的弹出窗口时保存最终值。这里的问题是用户可能会离开页面，失去连接或按下刷新，并且永远不会发送ajax调用。

我在这里进行ajax调用的基本功能是：

function saveNum(num) {

var urlString = "http://example.com/save_counter.php?num="+num;
$.ajax({
        url:urlString,
        dataType: 'json',
        error: function() {
            $('#status_messages').notify("problem with ajax call", { position:"top", className:"warn" });
        },
        success: function(data){
            console.log(data);
        }
    }); }

有关最佳设计方法的建议吗？有人说我的确切问题已经在另一个帖子中解决了。 How to rate-limit clicks on a button to once per minute in Javascript 但我的问题不同。在另一个解决方案中，这些用户被迫每分钟只进行一次Ajax调用。我无法强制我的用户只按特定间隔点击左右箭头。他们需要能够自由点击。我只需要javascript就可以优雅地处理它，以免丢失数据而不会进行不必要的ajax调用。

答案：

该问题被标记为重复。但正如所说，这个问题是不同的。我想我有一个解决这个问题的方法，但由于我无法发布答案，我只是编辑原来的问题。

试试这个：

<script>
// original saveNum() function
function saveNum(num) {
    var urlString = "http://example.com/save_counter.php?num="+num;
    $.ajax({
        url:urlString,
        dataType: 'json',
        error: function() {
            $('#status_messages').notify("problem with ajax call", { position:"top", className:"warn" });
        },
        success: function(data){
            console.log(data);
        }
    });
}

$(document).ready(function(){
    var num = 0;
    var wait_for = 3000;//miliseconds

    //left arrow event
    $("#left_arrow").click(function(){
        num--; //decrement num
        $("#acct_num").html( num ); //show acct num to user
        if( typeof timeout !== "undefined" ) {
            clearTimeout( timeout ); //clear timeout if it is defined
        }
        timeout = setTimeout( saveNum, wait_for, num ); //set new timeout
    });

    //right arrow event
    $("#right_arrow").click(function(){
        num++; //increment num
        $("#acct_num").html( num );  //show acct num to user
        if( typeof timeout !== "undefined" ) {
            clearTimeout( timeout ); //clear timeout if it is defined
        }
        timeout = setTimeout( saveNum, wait_for, num ); //set new timeout
    });

    //save num when user exit page before timeout
    $(window).unload(function() {
        saveNum(num);
    });
});
</script>

<div id="left_arrow">left</div>
<div id="right_arrow">right</div>
<div id="acct_num"></div>

当用户点击任何箭头时，它只会更新num变量并设置超时。然后超时在3秒内调用saveNum（）函数。当用户在超时之前再次单击任何箭头时，它只会更新num变量并重置超时。只有在3秒没有点击或用户离开页面时才会触发超时。

按下按钮进行Ajax调用，但不要太频繁

0 个答案: