如何使用 jQuery 为 ajax 设置超时？

在 Web 编程中，使用 Ajax 以便将结果数据显示在网页的一部分中，而无需重新加载页面。用户需要执行 Ajax 请求并希望在一个时间范围内得到结果。在这种情况下，代码中使用了 jquery超时功能。会话超时一直是基于 Ajax 的 Web 应用程序中非常常见的特性。

在响应式界面中，程序员需要延迟ajax请求以在响应之前完成一些任务。这可以通过使用 jQuery setTimeout()函数来实现。这个函数在给定的时间后执行给定的 Ajax 代码。

句法 ：

• $.ajax(page_url);

• $.ajax(page_url,[options]);

参数：

• page_url：该参数用于提交数据或检索数据。
• options：该参数用于保存ajax请求所需的其他配置设置。

下面的示例说明了该方法：

示例 1：

• 代码片段：

  $.ajax({
      url: "test.php",
      error: function(){
          //Error code
      },
      success: function(){
          //Success code
      }
     timeout: 5000 // sets timeout to 5 seconds
  });
  

  如果请求成功，则执行成功函数。或者有时如果发生错误，与其等待更长的时间，不如快速响应。这是在错误函数处理的。下面的程序，解释了代码的ajax部分中超时选项的实现。超时是指定要处理请求的时间（以毫秒为单位）的数字。

程序：

• HTML文件：

    
  
    
  
      
      Set timeout for ajax using jQuery
      
          body {
              width: 450px;
              height: 300px;
              margin: 10px;
              float: left;
          }
            
          .height {
              height: 10px;
          }
      
    
      
      
    
      
          var ajaxObject = null;
    
          // ajaxcall function will handle ajax call
          function ajaxCall() {
    
              var dataquery = 'true';
    
              if (ajaxObject != null) {
                  ajaxObject.abort();
                  $("#ajaxOutput")
                  .html("Ajax aborted for initialization again! ");
                  ajaxObject = null;
              }
    
              // creating ajax call
              ajaxObject = $.ajax({
    
                  // setting the url
                  url: "data.php",
    
                  data: {
                      dataquery: ''
                  },
    
                  // Set to 5 seconds for timeout limit
                  timeout: 5000,
    
                  //Check for success message in ajaxOutput div
                  success: (function(response, responseStatus) {
                      if (responseStatus == 'success') {
                          $("#ajaxOutput").html(response);
                      }
                  }),
    
                  // Check for existence of file
                  statusCode: {
                      404: function() {
                          $("#ajaxOutput")
                          .html("File does not exists!");
                      }
                  },
                  
                  // If the time exceeds 5 seconds 
                  // then throw error message
                  error: function(xhr, textStatus, errorThrown) {
    
                      if (textStatus == 'timeout') {
                          $("#ajaxOutput")
                          .html("Error : Timeout for this call!");
                      }
                  }
              });
          }
      
  
    
  
      GeeksforGeeks
       Set timeout for ajax using jQuery 
       
      
          
            Send Data
          
           
           
    
      
    
  
    

• PHP文件：以上示例中使用了以下PHP文件。

输出 ：

• 点击按钮前：

  

• 点击按钮后：

  

示例 2： setTimeout()是一个 jQuery函数，它在延迟特定时间限制后执行代码片段。例如，为访问某个网站的用户延迟特定时间限制的弹出窗口。这个方法接受一个指向函数的指针作为它的第一个参数。在此示例中，使用setTimeout()方法将 Ajax 代码延迟 4 秒。

代码片段：

• function callerFunction(){
    alert("jQuery setTimeOut execution is fine!");
  }
  setTimeout(callerFunction, 4000);

  或者

• var callerFunction = function(){
    alert("Execution point!");
  };
  setTimeout(callerFunction, 4000);

程序：

• HTML文件：

    
  
      
      Set timeout for ajax using jQuery
      
          <style> body {
              width: 450px;
              height: 300px;
              margin: 10px;
              float: left;
          }
            
          .height {
              height: 10px;
          }
      
      
      
      
          $(function() {
              var timedelay = 4000;
    
              $('#sendData').on('click', function() {
                  $.ajax({
                      type: 'POST',
                      url: 'test.php',
                      data: {
                          "data": "checkData"
                      },
                      success: function(response) {
                          setTimeout(function() {
                              $('#ajaxOutput')
                              .append(response);
                          }, timedelay);
                      }
                  });
              });
          });
      
  
    
  
      GeeksforGeeks
      Set timeout for ajax using jQuery
      
      
          
            Set timeout for getting data
          
          
          
      
  
    

• PHP文件：对于上述示例代码，请使用以下PHP文件。

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    
    

  取消超时：有时程序员需要使用jQuery clearTimeout()方法取消代码中设置的定时器。

  • 代码片段：

    var timerValue = setTimeout(timerFunction, 5000);
    clearTimeout(timerValue);
    

  jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
  您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。