makerequest ajax,如何延迟发送ajax请求？(How can I make a delay for sending an ajax request?)...

如何延迟发送ajax请求？(How can I make a delay for sending an ajax request?)

这是我的代码：

$("input").on('keydown', function(){

$.ajax({

url : '/files/tags_autocomplete.php',

dataType : 'JSON',

success : function (tags) {

$("ul").html(tags.output);

}

});

});

我的代码在用户输入标签时向用户建议了一些标签(具有匹配的子字符串与用户目前已写入的标签)作为自动完成框。

我的问题是什么？ 我当前的代码每个keydown发送一个新的ajax请求。 例如，如果用户写了something ，我的脚本会发送9个ajax请求，这看起来像是一场噩梦。

无论如何，我该如何处理？ 我的意思是我需要实现发送延迟吗？ 像“在插入最后一个字符后1秒才发送请求”之类的东西 ？ 或者有更好的主意吗？

Here is my code:

$("input").on('keydown', function(){

$.ajax({

url : '/files/tags_autocomplete.php',

dataType : 'JSON',

success : function (tags) {

$("ul").html(tags.output);

}

});

});

My code suggests some tags (the ones that have a matched substring with what the user has written so far) to user as an autocomplete box when he is typing his tags.

What's my problem? My current code sends a new ajax request per each keydown. For example, if the user writes something, my script sends 9 ajax requests which seems like a nightmare.

Anyway, how can I handle that? I mean do I need to implement a delay for sending? Something like "don't send the request until 1 sec after last character inserted"? or is there any better idea?

原文：https://stackoverflow.com/questions/39647139

更新时间：2020-02-06 07:52

最满意答案

您可以创建一个简单的节流机制

$("input").on('keydown', function(){

clearTimeout( $(this).data('timer'); )

var timer = setTimeout(function() {

$.ajax({

url : '/files/tags_autocomplete.php',

dataType : 'JSON',

success : function (tags) {

$("ul").html(tags.output);

}

});

}, 500);

$(this).data('timer', timer);

});

You could create a simple throttle mechanism

$("input").on('keydown', function(){

clearTimeout( $(this).data('timer'); )

var timer = setTimeout(function() {

$.ajax({

url : '/files/tags_autocomplete.php',

dataType : 'JSON',

success : function (tags) {

$("ul").html(tags.output);

}

});

}, 500);

$(this).data('timer', timer);

});

相关问答

像Rory一样，我对这样做有点怀疑，但如果你想这样做，你可以通过返回你在ajax回调中解决的自己的承诺来做到这一点： function myfunc(offset) {

var d = $.Deferred(); // Create "Deferred" object

setTimeout(function(){

return $.ajax({

url:"https://www.URL.com",

...

如果你想设置一个Ajax超时 let timeout;

$('#yourId').on('click',function(){

if(typeof timeout != 'undefined'){

clearTimeout(timeout);

}

timeout = setTimeout(function() {

//your code here

},

200); //milliseconds

});

if you want to set an

...

您的问题是您正在为每个城市更改定义一个间隔，但在更改城市后不会清除它，因此您有一个累积的间隔。 setInterval(callback，ms) 计划每隔ms毫秒重复调用回调。 任何其他参数都会直接传递给回调。 如果您只想延迟一次Ajax请求，则应该使用setTimeout api。 Your problem is that you are defining an interval for each city change, but not clearing it after the city i

...

试试这个脚本。 $(document).ready(function() {

$('.combo').each(function() {

var input = '#' + this.id;

var count = 0;

$(count).show();

combo(input, count);

$(this).keyup(function() {

combo(input, count)

});

});

});

fu

...

一种替代方法是定期发出http请求。 这种方法的问题在于您必须解密输入和输出的数据格式。 您可以使用firebug( https://getfirebug.com/ )并启用“net”选项卡，在浏览器中详细查看所有请求/响应流量 当您将鼠标悬停在“URL”列中的“POST”行时，它会显示完整的URL。 单击(+)以展开请求项以查看请求的详细信息。 One alternative is to make regular http requests. The problem with this appr

...

您可以创建一个简单的节流机制 $("input").on('keydown', function(){

clearTimeout( $(this).data('timer'); )

var timer = setTimeout(function() {

$.ajax({

url : '/files/tags_autocomplete.php',

dataType : 'JSON',

success : f

...

您可以在下划线库中使用节流功能。 正如其文件所述： 创建并返回传递函数的新的受限制版本，当重复调用时，每隔等待毫秒最多只调用一次原始函数。 对于速度限制事件非常有用，这些事件发生得比您能跟上的速度要快。 即使您不想引入新库，您仍然可以从其源代码中了解此函数的工作原理。 事实上，一个简单版本的throttle功能可能是： function throttle(func, delay) {

var timeout = null;

return function() {

v

...

对于最后2个标题，它们对于浏览器兼容性并不是强制性的。 这些标题用作首选项指示(Accept-Language)和内容优化(If-Modified-Since)。 request.setRequestHeader("Accept-Language", "en");

request.setRequestHeader("If-Modified-Since", lastRequestTime.toString());

在服务器端使用第一个标头来检测查询是从AJAX还是仅通过导航完成的。 较旧的浏览器

...

如果您查看渲染的HTML(浏览器中的“查看源代码”)，您会看到您的javascript看起来像： data:

{

user_1 : 1 ,

user_2 : 2,

user_username : someusername,

user_password : somepassword

},

既然这些是字符串(我假设)，你需要引用它们： data:

{

user_1 : <?php echo $l

...