javascript - Jquery 触发了太多的 ajax 请求

Question

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

当textbox->("#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

您可以缓存调用并使用 blur 事件而不是 keyup:您正在触发大量 AJAX 调用，因为每次按下键时 keyup() 都会触发一个事件，您应该使用 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;
    }
});