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请求

回答

相关问题