Javascript函数在运行时被再次调用

Javascript function being called again while it is still running

本文关键字:调用 运行时 函数 Javascript      更新时间:2023-09-26

我有一个javascript函数,当用户单击按钮并执行向数据库添加一些数据的AJAX查询时调用该函数。然而,我一直在抱怨很多数据没有通过,我认为问题在于点击之间的时间间隔。当他们在点击之间等待足够长的时间时,数据总是能通过,但如果他们等待的时间不够长,那就是一个赌博。

所以我很确定问题是javascript函数在运行时再次被调用,这是我不应该允许的。是否有一种方法可以在函数开始时锁定用户的浏览器,并在AJAX结束后解锁它?我知道这可能会激怒我的用户,但我想不出其他解决办法。

这不是完全必要的,但这是我的javascript函数看起来像:

function addtolist(thisform, sdata)
{
    var scntDiv = $('#p_data');
    var request = $.ajax({ async: false, url: "php_addtolist.php", type: "POST", data: {data:sdata}, dataType: "html" });
    request.done(function(msg) { outdata = parseInt(msg); });
    $(outdata).appendTo(scntDiv);
}

您可以在调用该函数时禁用该按钮,然后使用complete回调重新启用该按钮:

function addtolist(thisform, sdata)
{
    $('#submit_btn').prop('disabled', true);
    var scntDiv = $('#p_data');
    var request = $.ajax({ 
        async: false, 
        url: "php_addtolist.php", 
        type: "POST", 
        data: {data:sdata}, dataType: "html" },
        complete: function() { $('#submit_btn').prop('disabled', false); }
    );
    request.done(function(msg) { outdata = parseInt(msg); });
    $(outdata).appendTo(scntDiv);
}

基本上看起来outdata是异步的。下面的方法可以解决问题。

function addtolist(thisform, sdata)
{
    var scntDiv = $('#p_data');
    var request = $.ajax({ async: false, url: "php_addtolist.php", type: "POST", data: {data:sdata}, dataType: "html" });
    request.done(function(msg) { 
        outdata = parseInt(msg); 
        $(outdata).appendTo(scntDiv);
     });
}