jQuery 每秒执行一次 Ajax 请求

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20371695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:08:47  来源:igfitidea点击:

Execute an Ajax request every second

jqueryajax

提问by Code_Ed_Student

I have an ajax call being made to a php file. I am receiving results. Now I am investigating if it is possible to have the ajax request automatically perform every 1 second. I am posting the results into input field called hidden. How can I execute the ajax call every three seconds without having to call the function?

我对一个 php 文件进行了 ajax 调用。我正在接收结果。现在我正在研究是否可以每 1 秒自动执行一次 ajax 请求。我将结果发布到名为hidden. 如何每三秒执行一次ajax调用而不必调用该函数?

    $.ajax({
            type: 'POST',
            url: 'increment.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                    $('#hidden').val(data);// first set the value     

            }
    });

采纳答案by Richard Peck

Something you might want to consider is Server Sent Events(SSE's)

您可能需要考虑的是服务器发送事件(SSE)

This is an HTML5 technology whereby Javascript will "long-poll" a server endpoint (your PHP file) to see if any changes have occurred. Long-polling is basically where JS (I'm not sure if it uses Ajax or another technology) sends a request every second to the endpoint

这是一种 HTML5 技术,通过该技术,Javascript 将“长轮询”服务器端点(您的 PHP 文件)以查看是否发生了任何更改。长轮询基本上是 JS(我不确定它是否使用 Ajax 或其他技术)每秒向端点发送请求的地方

You can try it like this:

你可以这样试试:

#/your_js
var evtSource = new EventSource("increment.php");
evtSource.onmessage = function(e) {
    $('#hidden').val(e.data);
}

To send the data, you can make an ajax call which will send the updated JSON object to the server, like you have:

要发送数据,您可以进行 ajax 调用,该调用会将更新的 JSON 对象发送到服务器,例如:

  $(document).on("click", ".your_object", function(data) {
     $.ajax({
                type: 'POST',
                url: 'increment.php',
                data: $(this).serialize(),
                dataType: 'json'
        });
   });

This will only open an Ajax request when you perform an event, and your app will be "listening" for the response every second. As you are aware, Ajax long-polling is super resource-intensive, so it will be better to look at web-socket stuff if you want true "real-time" technology, but either way, this will be a much more efficient system than just using plain ajax for everything

这只会在您执行事件时打开 Ajax 请求,并且您的应用程序将每秒“侦听”响应。如您所知,Ajax 长轮询是超级资源密集型的,因此如果您想要真正的“实时”技术,最好查看 web-socket 内容,但无论哪种方式,这都将是一个更高效的系统不仅仅是对所有事情都使用普通的 ajax

A caveat here -- you'll have to change your increment.phpto handle the different response types

这里有一个警告——你必须改变你的increment.php来处理不同的响应类型

回答by T.J. Crowder

You can do this with a repeated series of setTimeoutcalls. (Don'tuse setIntervalwith ajaxcalls, you'll get chaos in no time; setIntervalwill fire off the next ajax call even if the previous one hasn't completed yet.)

您可以通过一系列重复的setTimeout调用来做到这一点。(不要setIntervalajax调用一起使用,你会立即陷入混乱;setInterval即使前一个尚未完成,也会触发下一个 ajax 调用。)

Use setTimeoutto schedule the first call, and then when it completes to schedule the next, etc.:

使用setTimeout安排的第一个电话,然后当它完成计划下一次,等:

var interval = 1000;  // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
    $.ajax({
            type: 'POST',
            url: 'increment.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                    $('#hidden').val(data);// first set the value     
            },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}
setTimeout(doAjax, interval);

Note that I'm using complete, not success, to schedule the next call, so that an interruption (temporary drop in your 'net connection, whatever) doesn't kill the process.

请注意,我使用complete, notsuccess来安排下一次调用,以便中断(临时断开您的“网络连接”等)不会终止进程。

回答by Praveen

Yes possible using setInterval

是的可以使用 setInterval

1) Keep your ajax within a function.

1) 将您的 ajax 保留在一个函数中。

function fun() {
$.ajax({
            type: 'POST',
            url: 'increment.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                    $('#hidden').val(data);// first set the value     

            }
    });
}

2) Now using setInterval, you can execute it every second.

2)现在使用setInterval,您可以每秒执行一次。

var interval = setInterval(fun, 1000);

3) To pause/clear use clearInterval

3) 暂停/清除使用 clearInterval

clearInterval(interval);

4) As other pointed that using setIntervalfor ajaxis not wise, so try using

4)正如其他人指出的那样,使用setIntervalforajax是不明智的,所以尝试使用

var interval;
function callAjax() {
  $.ajax({
                type: 'POST',
                url: 'increment.php',
                data: $(this).serialize(),
                dataType: 'json',
                success: function (data) {
                        $('#hidden').val(data);// first set the value 
                        interval = setTimeout(callAjax, 1000);   
                }
        });
}
callAjax();
//clearTimeout(interval);