Question

我在HTML页面的“head”部分创建了两个用户定义的函数，我在关闭“body”标记之前用脚本调用它们。问题是第二个函数不起作用，除非我在第一个函数中包含一个“alert”语句（在我解除警报之前停止执行）。

我猜它是由第一个功能在第二个功能开始之前没有完全完成而引起的，并且通过我的警告声明它给出了第一个功能时间来完成。

功能一是在DIV标签中构建图像列表。函数2实现FlexSlider以启动图像的幻灯片放映。

调用下面的内容将呈现包含所有图像的页面。如果我取消注释警告框并再次运行它，屏幕将显示我的图像，我关闭警报框，然后FlexSlider启动并开始幻灯片放映。

以下是“head”部分中定义的两个函数。

<script type="text/javascript">
        var buildslider = function () {
            $.ajax({
                type: "GET",
                url: "/myImages/homepageslider/PhotoGallery.xml",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('img').each(function() {
                        var location = '/myImages/homepageslider/';
                        var url = $(this).attr('src');
                        var alt = $(this).attr('alt');
                        $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
                    });
                }
            });
        //alert("buildslider finished");
        };

        var runslider = function() {
            $('.flexslider').flexslider({
                selector: '.slides > .slide-group',
                controlNav: false,
                directionNav: false
            });
        };
    </script>

这是关闭“body”标签附近的代码。

   <script>
        $(document).ready(function() {
            buildslider();
            runslider();
            });
    </script>

我做错了什么？我如何纠正这个问题以便正确完成？

提前谢谢你。大卫。

Answer 1

从第一个函数返回ajax()返回的对象。这是一个jQuery＆＃34;承诺＆＃34;然后将公开done和fail方法的对象。这些方法需要一个函数，因此您只需将第二个函数插入done即可。见下面的例子：

<script type="text/javascript">
        var buildslider = function () {
            return $.ajax({
                type: "GET",
                url: "/myImages/homepageslider/PhotoGallery.xml",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('img').each(function() {
                        var location = '/myImages/homepageslider/';
                        var url = $(this).attr('src');
                        var alt = $(this).attr('alt');
                        $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
                    });
                }
            });
        };

        var runslider = function() {
            $('.flexslider').flexslider({
                selector: '.slides > .slide-group',
                controlNav: false,
                directionNav: false
            });
        };
    </script>

然后运行：

<script>
    $(document).ready(function() {
        buildslider().done(runslider);
        });
</script>

它还可以更方便地以更一般的方式处理故障：

<script>
    $(document).ready(function() {
        buildslider().done(runslider).fail(function(){
           alert("#%&£ happens!");
        });
    });
</script>

使用promises比使用回调更灵活，并且支持多个done()函数，因此现在是执行此操作的首选方法。

注意：DOM ready的简单快捷方式是$(function(){ your code here });，或者如果您希望它具有本地范围的$使用jQuery(function($){ your code here });，它既充当DOM就绪处理程序又提供本地范围$以避免冲突（例如与其他插件）。

Answer 2

<script type="text/javascript">
        var buildslider = function () {
            $.ajax({
                type: "GET",
                url: "/myImages/homepageslider/PhotoGallery.xml",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('img').each(function() {
                        var location = '/myImages/homepageslider/';
                        var url = $(this).attr('src');
                        var alt = $(this).attr('alt');
                        $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
                    });
                }
            });
        //alert("buildslider finished");
        };

        var runslider = function() {
            $('.flexslider').flexslider({
                selector: '.slides > .slide-group',
                controlNav: false,
                directionNav: false
            });
        };

        $( document ).ajaxComplete(function( event, xhr, settings ) {
        if ( settings.url === "/myImages/homepageslider/PhotoGallery.xml" ) {
        runslider();
        }
        });
    </script>

现在只需调用buildslider（），无需调用document.ready中的runslider（）..

Answer 3

尝试这样的事情

var buildslider = function () {
    $.ajax({
        type: "GET",
        url: "/myImages/homepageslider/PhotoGallery.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('img').each(function() {
                var location = '/myImages/homepageslider/';
                var url = $(this).attr('src');
                var alt = $(this).attr('alt');
                $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
                $('.flexslider').flexslider({
                    selector: '.slides > .slide-group',
                    controlNav: false,
                    directionNav: false
                });
            });
        }
    });
};

最终脚本块

    $(document).ready(function() {
        buildslider();
    });

注意：成功完成ajax后执行滑块代码。

第二个jQuery函数无法运行

3 个答案: