Question

我有一个问题，我很惊讶我从未见过任何实现这种技术的脚本，但我不能自己解决它，所以我需要一个线索。要查看我想要的内容，请查看此基本页面：

<!DOCTYPE html>

<html lang="en">

<head>

<style>

#loading{

display:none;

position: fixed;

width:500px;

height:200px;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -250px;

z-index: 1;

border:black thin solid;

background-color: gold;}

</style>

<script src="path/to/jquery.min.js"></script>

<script>

        $(document).ready(function () {

        $('.click').click(function () {

        $("#content").empty();

        var src = $(this).attr('data-source').split(';');
        var l = src.length;
        $("#loading").ajaxStart(function(){
        $(this).html("Loading, please wait...").show();
        }).ajaxStop(function(){
        $(this).hide();
        });
        if (src.length >= 1 && src.length <= 5) {
            $.get(src[0].substring(src[0].lastIndexOf('@') + 1), {}, function (data) {
                var $response = $('<div />').html(data);
                $('#content').append($response.find(src[0].substring(0, src[0].lastIndexOf('@'))));
            }, 'html').complete(function () {
                $('#loading').html('Loaded: 1. Total: ' + l);
                if (src.length >= 2) {
                    $.get(src[1].substring(src[1].lastIndexOf('@') + 1), {}, function (data) {
                        var $response = $('<div />').html(data);
                        $('#content').append($response.find(src[1].substring(0, src[1].lastIndexOf('@'))));
                    }, 'html').complete(function () {
                        $('#loading').html('Loaded: 2. Total: ' + l);
                        if (src.length >= 3) {
                            $.get(src[2].substring(src[2].lastIndexOf('@') + 1), {}, function (data) {
                                var $response = $('<div />').html(data);
                                $('#content').append($response.find(src[2].substring(0, src[2].lastIndexOf('@'))));
                            }, 'html').complete(function () {
                                $('#loading').html('Loaded: 3. Total: ' + l);
                                if (src.length >= 4) {
                                    $.get(src[3].substring(src[3].lastIndexOf('@') + 1), {}, function (data) {
                                        var $response = $('<div />').html(data);
                                        $('#content').append($response.find(src[3].substring(0, src[3].lastIndexOf('@'))));
                                    }, 'html').complete(function () {
                                        $('#loading').html('Loaded: 4. Total: ' + l);
                                        if (src.length >= 5) {
                                                         $.get(src[4].substring(src[4].lastIndexOf('@') + 1), {}, function (data) {
                                                var $response = $('<div />').html(data);
                                           $('#content').append($response.find(src[4].substring(0, src[4].lastIndexOf('@'))));
        }, 'html').complete(function () {
        $('#loading').html('Loaded: 5. Total: ' + l);
        });
        }
        });
        }
        });
        }
        });
        }
        });
        } 
        });
        });
        </script>
</head>
<body>
<span data-source="#part1, #part3, #part4@page1.html;#part2@page2.html;#part5@page1.html" class="click">Click me</span>
<div id="content">
</div>
<div id="loading">Loading, please wait...</div>
</body>
</html>

也就是说，元素严格按照我在“data-source”属性中指定的顺序加载。这个脚本似乎按照我的预期工作，但问题是我不想“手动”为每个可能的长度写一个单独的函数！我想要一个自动完成这项工作的脚本！我试过这个：

   jQuery.each(src, function (i) {
            $.get(src[i].substring(src[i].lastIndexOf('@') + 1), {}, function (data) {
                var $response = $('<div />').html(data);
                var $ids = $response.find(src[i].substring(0, src[i].lastIndexOf('@')));
                $('#content').append($ids);
            }, 'html').complete(function () {
                $('#loading').html('Loaded: ' + (i + 1) + '. Total:' + l);
            });
        });

但在这种情况下，由于AJAX的本质以及jQuery.each不等于无限.complete（function（）{...。complete（function（）{... .complete）这一事实（function（）{...，元素不会以我指定的顺序附加，特别是如果它们来自同一页面。如果我将我的数据源属性写为“page 1.html＃part1，＃ part2“并使用类似的东西：

    jQuery.each(src, function (i) {
            $('<div />').attr('class', 'container').appendTo($('#content')).load(src[i], function() {
    $('#loading').html('Loaded: ' + (i + 1) + '. Total:' + l);
    });
        });

元素似乎以正确的顺序附加，并且它们以我无法理解的方式执行：一个只是向下移动另一个，取代两个已存在的元素之间的位置！但我无法想象我的加载消息中的HTML来自哪里，它可能只是显示页面从上到下加载。我还尝试使用ajaxComplete事件，并在第一次Ajax调用后使用“data”属性进行操作，但没有得到任何结果。

那么，ajaxComplete是否等于.complete（function（）{... .complete（function（）{...。complete（function（）{...？如果是的话，我怎么告诉脚本：“从这个数组的第一个元素开始，忘记其他元素。当你完成后，切换到下一个...依此类推，直到结束”

Answer 1

我建议使用递归解决方案：

var i = 0; 
var load = function (index) {
    $.get(src[index].substring(src[index].lastIndexOf('@') + 1), {}, function (data) {    
            var $response = $('<div />').html(data);    
            var $ids = $response.find(src[index].substring(0, src[index].lastIndexOf('@')));    
            $('#content').append($ids);    
        }, 'html').complete(function () {    
            $('#loading').html('Loaded: ' + (index + 1) + '. Total:' + l);
                          if(index +=1){
                load(index += 1); //recursion
                          }
        });
}
load(i);

如何强制我的AJAX调用元素以我在数组中指定的顺序追加？

1 个答案: