html 获取最新 AJAX 请求并中止其他请求

dohp0rv5  于 2023-02-06  发布在  其他
关注(0)|答案(4)|浏览(144)

我一直在搜索,这个问题看起来很简单,但找不到答案。我有多个请求调用不同的网址。但对于每个网址,我只想要一次结果,它必须是同一个网址被调用的最后一个。我现在的问题是“如何获得最后一个?”我看了看这个,它似乎是3岁:
http://plugins.jquery.com/project/ajaxqueue
有没有其他的方法可以很好很干净地做到这一点?如果有这样的东西,那就太完美了:

queue: "getuserprofile",
cancelExisting: true

(其中getuserprofile队列中现有的 AJAX 将被取消)
谢谢

wqsoz72f

wqsoz72f1#

This explains如何使用jQuery进行 AJAX 调用以及如何中止它。您需要做的只是创建一个数组来存储每个请求。然后您可以在添加新请求时取消以前的请求。

ajaxRequests = new Array();

queueRequest = function() {
    if(ajaxRequests[ajaxRequests.length - 1]) {
        ajaxRequests[ajaxRequests.length - 1].abort();
    }

    ajaxRequests[ajaxRequests.length] = //Insert New jQuery AJAX call here.
}
de90aj5v

de90aj5v2#

由于我们只需要最后一次请求的结果,因此这非常简单并且有效。

var ajax = null;
var getFoo = function() {
    if(ajax) ajax.abort();
    ajax= $.ajax({});
};
getFool();
getFool();
getFool();
getFool();
getFool();
getFool();

仅执行最后的请求。

y4ekin9u

y4ekin9u3#

您可以使用Basic jquery Ajax方法,而不是使用库:
beforeSend:{}
例如:

xhr = jQuery.ajax({
            url: /*Your URL*/
            type: "POST",
            data: {
              //data
            },
             /* if there is a previous ajax request, then we abort it and then set xhr to null */
            beforeSend : function()    {           
                if(xhr != null) {
                    xhr.abort();
                }
            },
success:function(){}

});
kcrjzv8t

kcrjzv8t4#

是的,很有可能......
一般来说,我不建议在服务器端停止请求,因为可能会有一些问题在以后很难检测到。
其思想是只检查已发送请求的状态,如有必要,就不再发送另一个请求。
下面是一个例子

let activeRequest = false; //global var
let request = null;

        $(document).ready(function(){

            $('#user').keyup(function(){

                let query = $(this).val();

                    if (query != '') {

                        const xhr = new XMLHttpRequest();

                         if (activeRequest === false){
                        
                            activeRequest = true;


                        let request = $.ajax({
                            url: 'https://baconipsum.com/api/?type=all-meat',
                                method: "POST",
                                beforeSend: function(){
                                //Some code here
                            },
                            data: {
                                    "type": $(":radio:checked").val(),
                                    "tags": query,
                                    
                                },
                                success: function (data) {
                                    //Code if succes
                                    console.log('Request with val: ' + query);
                                },
                                 complete: function() {
                                    activeRequest = false;
                           }

                       });

                      if(!request){
                         console.log('Req does exist');
                         }
                            request.done(function(  ) {
                                activeRequest = false;
                                console.log('Done, Request Finish');
                                request = false;
                                
                            });

                        }else{
                            //If ajax still request abort it
                            console.log('Exiting Request - LastOne Still In que')
                            //request.abort();
                            activeRequest = true;
                            
                        }

                    } //End iF query != ''
            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="user" id="user"  style="width: 200px;" placeholder="Enter User Name" />

为你定制它需要一些工作,但我认为它会帮助为你指导每个人。
//Edit我忘了,你可以自定义这个代码,例如添加

let value = $('#output').val();
value.slice(0,-1);

如果请求仍处于待处理状态......或者只是另一个想法,只需阻止输入更多字符的可能性,有很多解决方案

相关问题