Javascript 更改后的Ajax

我正在尝试创建一个textarea，在更改时触发ajax请求。 关键是我担心将太多的请求排入服务器队列，因为该请求将把这个文本区域的内容保存在数据库中。 实际上，我的想法是创建一种计时器，在最后一次onchange后几秒钟，启动ajax请求以保存textarea数据。 关键是我不知道这是不是一个好主意，而且，我仍然没有找到一个可以写下来的代码。

---

我正在使用JQuery。

尝试如下，通过将ajax调用延迟几秒钟来减少调用次数，看看用户是否会继续键入

var timeoutId; 
$('#textarea').on('change', function() {
  if(timeoutId){ 
    // prevent last timeout from sending the ajax call
    clearTimeout(timeoutId);
    timeoutId = 0;
  }
  timeoutId =setTimeout(submitFormAjax, 200);
   return false;
});
function submitFormAjax() {
    $.ajax({
        type:"POST",
        url:"ajax.php",
        data:$('#textarea').val(),
        success:function(data) {
            $("#result").html(data);
        }
    });
}

---

尝试如下所示，通过将ajax调用延迟几秒钟来减少调用次数，以查看用户是否将继续键入

var timeoutId; 
$('#textarea').on('change', function() {
  if(timeoutId){ 
    // prevent last timeout from sending the ajax call
    clearTimeout(timeoutId);
    timeoutId = 0;
  }
  timeoutId =setTimeout(submitFormAjax, 200);
   return false;
});
function submitFormAjax() {
    $.ajax({
        type:"POST",
        url:"ajax.php",
        data:$('#textarea').val(),
        success:function(data) {
            $("#result").html(data);
        }
    });
}

玩弄

你可以限制通话，基本的想法是检查是否有计时器

var requestTimer;
$('#textarea').on('change', function() {
   if (requestTimer) window.clearTimeout(requestTimer);  //see if there is a timeout that is active, if there is remove it.
   requestTimer = setTimeout(submitFormAjax, 1000);  //delay before making the call
});

您还可以检查是否存在活动的Ajax请求

var requestTimer;
var xhr;
$('#textarea').on('change', function() {
   if (requestTimer) window.clearTimeout(requestTimer);  //see if there is a timeout that is active, if there is remove it.
   if (xhr) xhr.abort();  //kill active Ajax request
   requestTimer = setTimeout(submitFormAjax, 1000);  //delay before making the call
});


function submitFormAjax() {
    xhr = $.ajax({
        type:"POST",
        url:"ajax.php",
        data:$('#textarea').val(),
        success:function(data) {
            $("#result").html(data);
        }
    });
}

玩弄

你可以限制通话，基本的想法是检查是否有计时器

var requestTimer;
$('#textarea').on('change', function() {
   if (requestTimer) window.clearTimeout(requestTimer);  //see if there is a timeout that is active, if there is remove it.
   requestTimer = setTimeout(submitFormAjax, 1000);  //delay before making the call
});

您还可以检查是否存在活动的Ajax请求

var requestTimer;
var xhr;
$('#textarea').on('change', function() {
   if (requestTimer) window.clearTimeout(requestTimer);  //see if there is a timeout that is active, if there is remove it.
   if (xhr) xhr.abort();  //kill active Ajax request
   requestTimer = setTimeout(submitFormAjax, 1000);  //delay before making the call
});


function submitFormAjax() {
    xhr = $.ajax({
        type:"POST",
        url:"ajax.php",
        data:$('#textarea').val(),
        success:function(data) {
            $("#result").html(data);
        }
    });
}

---

好主意还是坏主意：完全取决于您、服务器的接近程度、服务器资源和键入文本的用户数：）总之，计时器的代码如下所示：

<textarea id="textarea"></textarea>

var textTimeout = null;
$( "#textarea" ).on( "keyup", function() {
    var $that = $(this);

    cancelTimeout( textTimeout );
    textTimeout = setTimeout( function() {
        $.post("www.example.com", { data: $that.val() }, function() {
            alert( "Posted all text!" );
        });
    }, 2000);
});

var textTimeout=null；
$（“#textarea”）。在（“keyup”，function（）上{
var$that=$（this）；
取消超时（textTimeout）；
textTimeout=setTimeout（函数（）{
$.post（“www.example.com”，{data:$that.val（）}，function（））{
警报（“已发布所有文本！”）；
});
}, 2000);
});

---

但是，如果您在jQuery中使用“change”事件，那么它只会在您对文本区域失去关注时发生，因此您不必担心请求排队（是的！）。

好主意或坏主意：完全取决于您，服务器的接近程度、服务器资源和键入文本的用户数：）总之，计时器的代码如下所示：

<textarea id="textarea"></textarea>

var textTimeout = null;
$( "#textarea" ).on( "keyup", function() {
    var $that = $(this);

    cancelTimeout( textTimeout );
    textTimeout = setTimeout( function() {
        $.post("www.example.com", { data: $that.val() }, function() {
            alert( "Posted all text!" );
        });
    }, 2000);
});

var textTimeout=null；
$（“#textarea”）。在（“keyup”，function（）上{
var$that=$（this）；
取消超时（textTimeout）；
textTimeout=setTimeout（函数（）{
$.post（“www.example.com”，{data:$that.val（）}，function（））{
警报（“已发布所有文本！”）；
});
}, 2000);
});

---

但是，如果您在jQuery中使用“change”事件，那么它只会在您对文本区域失去焦点时发生，因此您不必担心请求排队（是的！）.

使用计时器是一个非常好的主意-查看使用setTimeout和clearTimeout。使用计时器是一个非常好的主意-查看使用setTimeout和clearTimeout。是否有方法在创建新的setTimeout之前“取消”上一个setTimeout？可能需要更长的超时时间超过200ms。。。这大概和正常打字一样快！另外，当按下另一个键时，这不会使用clearTimeout来取消计划的post。在创建新的setTimeout之前，是否有方法“取消”上一个setTimeout？可能需要超过200ms的超时。。。这大概和正常打字一样快！另外，当按下另一个键时，这不会使用clearTimeout来取消预定的post。这实际上就是我要找的。非常感谢你的更新这是我一直在寻找的。谢谢，谢谢你的更新