ตั้งค่าการหมดเวลาสำหรับ ajax (jQuery)

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

บางครั้งsuccessฟังก์ชั่นใช้งานได้ดีบางครั้งก็ไม่

ฉันจะตั้งค่าการหมดเวลาสำหรับคำขอ ajax นี้ได้อย่างไร ตัวอย่างเช่น 3 วินาทีหากหมดเวลาให้แสดงข้อผิดพลาด

ปัญหาคือคำขอ ajax หยุดการบล็อกจนกว่าจะเสร็จสิ้น หากเซิร์ฟเวอร์หยุดทำงานชั่วครู่เซิร์ฟเวอร์จะไม่สิ้นสุด

โปรดอ่าน$.ajax เอกสารนี้เป็นหัวข้อที่ครอบคลุม

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

คุณสามารถดูประเภทของข้อผิดพลาดที่ถูกโยนโดยการเข้าถึงพารามิเตอร์ textStatus ของerror: function(jqXHR, textStatus, errorThrown)ตัวเลือก ตัวเลือกคือ "หมดเวลา", "ข้อผิดพลาด", "ยกเลิก" และ "parsererror"

นี่คือตัวอย่างบางส่วนที่แสดงให้เห็นถึงการตั้งค่าและตรวจจับการหมดเวลาในกระบวนทัศน์เก่าและใหม่ของ jQuery

Live Demo

สัญญากับ jQuery 1.8+

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8+

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});​

jQuery <= 1.7.2

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

โปรดสังเกตว่าtextStatus param (หรือjqXHR.statusText ) จะแจ้งให้คุณทราบว่าเกิดข้อผิดพลาดอะไร สิ่งนี้อาจมีประโยชน์หากคุณต้องการทราบว่าความล้มเหลวเกิดจากการหมดเวลา

ข้อผิดพลาด (jqXHR, textStatus, errorThrown)

ฟังก์ชั่นที่จะเรียกว่าถ้าคำขอล้มเหลว ฟังก์ชั่นได้รับสามอาร์กิวเมนต์: วัตถุ jqXHR (ใน jQuery 1.4.x, XMLHttpRequest) สตริงที่อธิบายถึงประเภทของข้อผิดพลาดที่เกิดขึ้นและวัตถุข้อยกเว้นทางเลือกหากเกิดขึ้น ค่าที่เป็นไปได้สำหรับอาร์กิวเมนต์ที่สอง (นอกเหนือจาก null) คือ "หมดเวลา", "ข้อผิดพลาด", "ยกเลิก" และ "parsererror" เมื่อมีข้อผิดพลาด HTTP เกิดขึ้น errorThrown จะได้รับส่วนข้อความของสถานะ HTTP เช่น "Not Found" หรือ "Internal Server Error" ตั้งแต่ jQuery 1.5 การตั้งค่าข้อผิดพลาดสามารถยอมรับอาร์เรย์ของฟังก์ชันได้ ฟังก์ชั่นแต่ละอย่างจะถูกเรียกในทางกลับกัน หมายเหตุ: ตัวจัดการนี้ไม่ถูกเรียกใช้สำหรับสคริปต์ข้ามโดเมนและคำขอ JSONP

src: http://api.jquery.com/jQuery.ajax/

คุณสามารถใช้การtimeoutตั้งค่าในตัวเลือก ajax ดังนี้:

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

อ่านทั้งหมดเกี่ยวกับตัวเลือก ajax ได้ที่นี่: http://api.jquery.com/jQuery.ajax/

จำไว้ว่าเมื่อหมดเวลาใช้งานerrorตัวจัดการจะถูกเรียกใช้งานไม่ใช่successตัวจัดการ :)

ใช้.ajaxฟังก์ชั่น jQuery เต็มรูปแบบ เปรียบเทียบกับhttps://stackoverflow.com/a/3543713/1689451เพื่อเป็นตัวอย่าง

โดยไม่ต้องทดสอบเพียงรวมรหัสของคุณกับคำถาม SO ที่อ้างอิง:

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});​