Question

我有X DIV（TopRowRight1，TopRowRight2，TopRowRight3 ......），每个都包含由php页面生成的不同Google Geochart：GeochartPerProvince.php？template = X。

        function getResult(template){
            jQuery.post("GeochartPerProvince.php?template="+template,function( data ) {
                jQuery("#TopRowRight"+template).html(data);
            });
        }

        jQuery().ready(function(){
            getResult(1);
            setInterval("getResult(1)",10000);
            getResult(2);
            setInterval("getResult(2)",10000);
            getResult(3);
            setInterval("getResult(3)",10000);
        });

        jQuery(function () {

            var $els = $('div[id^=TopRowRight]'),
                i = 0,
                len = $els.length;
                $els.slice(1).hide();

            setInterval(function () {

                $els.eq(i).fadeOut(function () {

                    i = (i + 1) % len
                    $els.eq(i).fadeIn();
                })
            }, 5000)
        });

每隔5秒钟，我淡出一个，淡入下一个。这非常有效。现在，DIV中的php页面每10秒刷新一次。这也有效。

但我梦想的是DIV中的php页面在DIV淡出而不是每10秒后重新加载。怎么做？

解决。它是如何正常工作的：

    function getResult(template){
        jQuery.post("GeochartPerProvince.php?template="+template,function( data ) {
            jQuery("#TopRowRight"+template).html(data);
        });
    }

    $(document).ready(function(){
        getResult(0);
        getResult(1);
        getResult(2);
        //setInterval("getResult(2)",10000); <== keep this piece of code in case of need.
    });

    $(document).ready(function () {

        var $els = $('div[id^=TopRowRight]'),
            i = 0,
            len = $els.length;
            $els.slice(1).hide();

        setInterval(function () {

            $els.eq(i).fadeOut(function () {

                i = (i + 1) % len
                getResult(i);
                $els.eq(i).fadeIn();
            })
        }, 10000)
    });

Answer 1

元素淡出后，您已经在使用回调函数了。那么为什么不在里面调用你的arguments函数呢？

getResult

Answer 2

我有一些建议和示例代码可以帮助您实现所需：

使用$代替jQuery以便于阅读/编写
$(document).ready是dom相关功能的正确起点
如果一次只能看到一个div，请不要使用太多的div。大多数情况下，一个div足以交替/刷新内容。如果有进/出动画或交叉渐变，则需要两个div。（以下示例使用两个div）
除非您确实需要，否则请避免使用setInterval。使用setTimeout的逻辑可以更好地处理$ .post可能导致的意外延迟。

从像这样的html代码开始：

...
<div class="top-row-right" style="display:block"></div>
<div class="top-row-right" style="display:none"></div>
...

JS：

$(document).ready( function() {

    var len = 4; // 'I got X DIV..' This is where we put the value of X.
    var template = -1;

    function refreshChart() {

        template = (template + 1) % len;

        $.post("GeochartPerProvince.php?template="+template, function(data) {
            var offscreenDiv = ('.top-row-right:hidden');
            var onscreenDiv = ('.top-row-right:visible');

            offScreenDiv.html(data);
            onScreenDiv.fadeOut('slow', function() {
                offScreenDiv.fadeIn();
                setTimeout(refreshChart, 10000);
            });

        });
    }
    refreshChart();

});

淡出后再刷新DIV内容

2 个答案: