0

ヒントのHTMLリストがあり、そのリスト内のすべての要素はページの読み込み時に非表示になります。次に、指定した時間の後に3つのランダムなヒントをフェードインしようとしますが、すべて同じタイミングが設定されているにもかかわらず、ヒントは異なる時間にフェードインします。なぜこれが起こるのですか？

これが私の情報源です：

<script type="text/javascript">
    this.randomtip = function () {
        var pause = 4000;
        var length = $("#tips li").length;
        var temp = -1;

        this.getRan = function () {
            // get the random number
            var ran = Math.floor((Math.random() * length) + 1);

            return ran;
        };
        this.show = function () {
            $("#tips li").fadeOut(800);
            $("#tips li:nth-child(" + getRan() + ")").delay(1000).fadeIn(800);
            $("#tips li:nth-child(" + getRan() + ")").delay(1000).fadeIn(800);
            $("#tips li:nth-child(" + getRan() + ")").delay(1000).fadeIn(800);
        };

        show(); setInterval(show, pause);

    };

    $(document).ready(function () {
        $("#tips li").hide();
        randomtip();
    });
</script>
4

2 に答える 2

1

スクリプトの修正バージョンは次のとおりです。

http://jsfiddle.net/thinkingsites/WPsN7/17/

あなたの問題は次のとおりです。

  1. フェードは非同期で機能するため、フェードは基本的にすべて同時に発生します。タイミングが完璧ではないため、すぐに同期が外れます。
  2. あなたのランダムな方法は、それがユニークなアイテムをロードするという保証がありませんでした。これにより、同じ要素に同じコマンドが複数回与えられる可能性があります。

これを修正するために、jQueryアニメーションに組み込まれている機能であるjQuerydeferredsを使用しました。それが.promis（）。done（）です。.fade（interval、callback）を使用するよりも機能的です。前のコマンドが実行されるまでコールバックが起動しないことを保証します。これにより、適切に制御されていない場合に問題が発生する可能性があるsetIntervalが不要になります。jQueryにはこれが組み込まれているため、必須ではありません。

于 2012-06-25T15:51:08.943 に答える
0

「ThinkingSites」によって投稿されたコードを使用した後、すべてが問題ないように見えましたが、古いバージョンのInternet Explorerは「indexof」をサポートしていなかったため、以下は古いバージョンのInternetExplorerでも機能するコードの変更バージョンです。 ChromeおよびFirefoxとして：

<script type="text/javascript">
    var randomtip = function() {
    var pause = 4000;
    var length = $("#tips li").length;
    var temp = -1;

    this.getRan = function() {
        // get the random number
        var result = [];
        while (result.length < 3) {
            var r = Math.round((Math.random() * (length - 1)));
            if (!contains(result, r)) {
                result.push(r);
            }
        }
        return result;
    };

    var fadeout = function() {
        $("#tips li").delay(1500).fadeOut(800).promise().done(fadein);
    };

    var fadein = function() {
        var ran = getRan();
        $("li:eq(" + ran[0] + "),li:eq(" + ran[1] + "),li:eq(" + ran[2] + ")", "#tips").delay(1000).fadeIn(800).promise().done(fadeout);
        };

        fadein();
    };

    $(document).ready(function() {
        $("#tips li").hide();
        randomtip();
    });

    function contains(a, obj) {
        var i = a.length;
        while (i--) {
            if (a[i] === obj) {
                return true;
            }
        }
        return false;
    }
</script>
于 2012-06-25T14:20:41.570 に答える