Question

我正在尝试创建一个触发ajax请求onchange的textarea。关键是我担心向服务器排队太多请求，因为该请求将在db中保存此textarea的内容。实际上我的想法是创建一种计时器，在最后一次更改后的几秒钟后，启动ajax请求以保存textarea数据。关键是我没有任何线索，如果这是一个好主意，而且，我仍然没有找出要写下来的代码。我正在使用JQuery。

Answer 1

玩Dave's code above

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

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

Answer 2

尝试以下操作，通过延迟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);
        }
    });
}

Answer 3

好的或坏的想法：完全取决于您，您的服务器的邻近性，服务器资源和键入文本的用户数量:)无论如何，计时器的代码如下所示：

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

但是，如果您使用＆＃34;更改＆＃34; jQuery中的事件，只有当你在textarea上失去焦点时才会发生，所以你不必担心排队的请求（是的！）。

改变之后的Ajax

3 个答案: