Question

我使用jquery构建了以下代码。当用户复制并粘贴一个youtube url时，我想提取视频id是jquery中的getVideoId（str）方法。使用id，我得到视频图像图片标题和内容。

当textbox-＆gt;（“＃url”）的长度超过10时，我会发出ajax请求。因此，ajax请求正在运行。但现在我有另一个问题。第一次当文本框有超过10个字符时，有两个ajax请求被触发（使用firebug测试）。与用户输入更多字符时相比，有许多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;
            }
    }
);

Answer 1

你可以缓存调用并使用模糊事件而不是keyup：你正在激活很多AJAX调用，因为每次按下一个键时keyup（）都会触发一个事件，你应该使用模糊，当输入丢失时触发一个事件焦点。如果将调用缓存在对象中，则可以避免大量重复调用

   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] 
        }

    });

编辑如果您想使用提交键开始搜索，当您按下Enter键时可能会触发模糊事件：

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

Answer 2

我认为因为您使用$("#url").keyup(function()而触发了许多ajax请求因此，对于url输入中的每个关键事件，特定的函数都将被执行。因此，据我所知，更好地使用focusout方法而不是keyup。

Answer 3

如果您继续使用keyup - 事件，您可能希望使用ajaxmanager-plugin用于管理队列或限制同时请求数量的jQuery。

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

这将防止在用户键入时同时激活很多ajaxrequests。一旦他停止，请求就不会中止，结果会显示出来。

Jquery太多的ajax请求被解雇了

3 个答案: