</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> Update the question so it can be answered with facts and citations by <a href="/posts/23568926/edit">editing this post</a>.
</p>
<p class="mb0 mt6">Closed <span title="2014-05-09 17:06:15Z" class="relativetime">5 years ago</span>.</p>
</div>
</div>
</aside>
I'm trying to create a textarea that trigger an ajax request onchange. The point is that I'm worried about queueing too many requests to the server, because that request is going to save content of this textarea in a db. Actually my idea was something about creating a sort of timer, which, after a couple of seconds after the last onchange, start the ajax request to save the textarea data. The point is that I don't have any clue if it's a good idea, and also, I still don't figure out a code to write down. I'm using JQuery.
</div>
Try as below, reduce the number of calls by delaying the ajax call for a few seconds to see if the user is going to keep typing
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);
}
});
}
Playing off of Dave's code above
You can throttle the calls, basic idea would be to check to see if there is a timer
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
});
You could also check to see if there is an Ajax request that is active.
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);
}
});
}
Good or bad idea: is entirely up to you, your server's proximity, server resources and number of users keying in the text :) Anyways, the code for timer is something like as follows:
<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);
});
However, if you use the "change" event in jQuery, then it happens only when you lose focus on the textarea, so you don't need to worry about requests queueing up (yey!).