1

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

<!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>

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

   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 来自哪里，它可能只是表明页面是从最后一个加载到第一个。在我的第一次 Ajax 调用之后，我还尝试使用 ajaxComplete 事件并使用“数据”属性进行操作，但没有得到任何结果。

那么， ajaxComplete 是否等于 .complete(function () {... .complete(function () {... .complete(function () {... ？如果是，我该如何告诉脚本："从这个数组的第一个元素开始，忘记其他元素。完成后，切换到下一个元素……以此类推，直到结束”

4

1 回答 1

0

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

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);
于 2012-10-11T09:25:11.730 回答