jquery發送了太多的ajax請求

我使用jquery構建了以下代碼。當用戶複製並粘貼一個YouTube網址時，我想提取視頻ID是jQuery中的getVideoId（str）方法。使用id，我可以獲得視頻圖像的圖像標題和內容。jquery發送了太多的ajax請求

當textbox - >（「＃url」）的長度超過10時，我會發出ajax請求。因此，Ajax請求正在工作。但現在我有另一個問題。第一次當文本框超過10個字符時，有兩個Ajax請求被觸發（使用螢火蟲測試）。比用戶輸入更多字符時，有許多ajax請求被觸發。

因此，這將減慢最後一次ajax請求的進程。我只想獲取YouTube鏈接的數據並顯示用戶可以添加標題和內容的建議。這就像舊的Facebook視頻視頻鏈接。任何人在改進代碼方面都有更好的建議？

jQuery(document).ready(
    function(){ 
     $("#url").keyup(function() { 
      var $t1 = $("#url").val(); 
      var $length = $t1.length; 
      var $data; 

      $("#title").val($length); 
      $("#content").val($t1); 

      if($length==0){ 
       alert('zero value'); 
       return; 
      } 

      if($length>10){ 
       $data = $.ajax({ 
       url: '<?php echo $this->Html->url(array("action" => "retrieveVideoFeed"));?>', 
       dataType: "json", 
       data: { 
        vid: getVideoId($t1) 
       }, 
       success: function(data) { 
              alert('success in getting data'); 
       } 
      }); 

       return; 
      } 

     }); 

      function getVideoId(str) { 
       var urlRegex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/; 
       if (urlRegex.test(str) && str.indexOf('v=') != -1) 
       { 
        return str.split('v=')[1].substr(0, 11); // get 11-char youtube video id 
       } else if (str.length == 11) { 
        return str; 
       } 
       return null; 
      } 
    } 
);

來源

2011-10-24 madi

您可以緩存調用並使用blur事件而不是keyup：由於keyup（）在每次按下某個鍵時觸發一個事件，因此您正在觸發大量的AJAX調用，您應該使用blur來在輸入時觸發事件失去了重點。如果緩存中的對象的調用就可以避免很多重複調用

var cacheUrl = {}; 

    $("#url").blur(function() { 
     var $t1 = $("#url").val(); 
     var $length = $t1.length; 
     var $data; 

     $("#title").val($length); 
     $("#content").val($t1); 

     if($length==0){ 
      alert('zero value'); 
      return; 
     } 

     if(cacheUrls[$t1] !== undefined && $length>10){ 
      $data = $.ajax({ 
      url: '<?php echo $this->Html->url(array("action" => "retrieveVideoFeed"));?>', 
      dataType: "json", 
      data: { 
       vid: getVideoId($t1) 
      }, 
      success: function(data) { 
        //save the data to avoid a future call 
        cacheUrls[$t1] = data; 
             alert('success in getting data'); 
      } 
     }); 

      return; 
     }elseif ($length>10){ 
      //you already have the data in cacheUrls[$t1] 
     } 

    });

編輯的，如果你想使用提交鍵啓動，你可以觸發，當你按這樣的輸入模糊事件的搜索：

$("#url").keypress(function(e){ 
    if(e.which == 13){ 
     $(this).blur(); 
     return false; 
    } 
});

來源

2011-10-24 11:14:12

我把keyup，因爲我想每次用戶更改url時觸發事件。但你是對的。但是當我使用onblur時，用戶必須點擊外面的某個地方纔能運行ajax。我怎樣才能玩輸入按鈕。你能幫忙嗎？ – madi

我如何處理cacheUrl？對不起，我可能聽起來很愚蠢.....大聲笑 – madi

@madi我編輯了我的答案：基本上，你可以檢查最大的按鍵被按下並觸發模糊事件，如果該字符是輸入 –

我想是因爲你使用$("#url").keyup(function() 讓每一個關鍵事件URL輸入特定的功能可按將exectue.So，按照我知道最好使用事件的內容方法，而不是KEYUP許多Ajax請求被解僱。

來源

2011-10-24 11:12:20 Unknown

感謝您的意見:) – madi

如果你留在keyup - 活動你也許想使用jQuery的一個ajaxmanager-plugin可以管理隊列或限制的併發請求數。

$.manageAjax.create('myAjaxManager', { 
     queue: true, 
     cacheResponse: false, 
     maxRequests: 1, 
     queue: 'clear' 
    }); 
    .... 
    if($length>10){ 
     $data = $.manageAjax.add({ ...

這樣可以防止在用戶輸入的同時有大量的ajaxrequests活動。一旦他停止，請求將不會中止，結果將顯示出來。

來源

2011-10-24 11:32:51 Seybsen

jquery發送了太多的ajax請求

回答

相關問題