新的隨機數jQuery

Question

這是我的代碼

(function ($) {

        $.fn.snow2 = function (options) {

            var $flake = $('<a style="text-decoration: none;" href="/flake"><div id="flake" /></a>').css({
                'position': 'absolute',
                'top': '-50px',
                'z-index': '100'
            }).html('&#10052;'),
                documentHeight = $(document).height(),
                documentWidth = $(document).width(),
                defaults = {
                    minSize: 30,
                    maxSize: 50,
                    newOn: Math.floor(Math.random() * 14000) + 7000,
                    flakeColor: "#CE1126"
                },
                options = $.extend({}, defaults, options);


            var interval = setInterval(function () {
                var startPositionLeft = Math.random() * documentWidth - 100,
                    startOpacity = 0.5 + Math.random(),
                    sizeFlake = options.minSize + Math.random() * options.maxSize,
                    endPositionTop = documentHeight - 40,
                    endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
                    durationFall = documentHeight * 10 + Math.random() * 5000;
                $flake
                    .clone()
                    .appendTo('body')
                    .css({
                        left: startPositionLeft,
                        opacity: startOpacity,
                        'font-size': sizeFlake,
                        color: options.flakeColor
                    })
                    .animate({
                            top: endPositionTop,
                            left: endPositionLeft,
                            opacity: 0.2
                        },
                        durationFall,
                        'linear',
                        function () {
                            $(this).remove()
                        }
                );
            }, options.newOn);

        };

    })(jQuery);

我試圖讓它以7000和14000毫秒之類的隨機間隔吐出一片雪花，問題是當我調用該函數時，它會獲得7000和14000之間的隨機數，並一次又一次使用相同的值。 假設返回12806，它將每12806毫秒吐出一片雪花。 我每次都想要一個新號碼。 我將如何實現這一目標？ 我從一些不同的地方蠶食了這段代碼，並且對JavaScript或jQuery不太了解。 任何幫助表示贊賞。

Answer 1

問題是setInterval ，它確實可以滿足您的要求。 我認為您寧願使用setTimeout 。 來自Mozilla開發人員網絡 ：

setTimeout()在指定的延遲后調用函數或執行代碼段。

setInterval()重復調用函數或執行代碼段，每次調用該函數之間有固定的時間延遲。

Answer 2

是的，我將使用setTimeout並使用新的超時值調用函數本身。 我還將newOn設置為函數而不是變量，因為它將僅作為變量計算一次。

查看此小提琴的行為是否如您所願： http : //jsfiddle.net/e9KE9/1/

在小提琴中，我將第一個超時設置為0，以便第一個超時立即顯示。

pss感覺更像下雪： http : //jsfiddle.net/e9KE9/2/很棒的主意！

$.fn.snow2 = function (options) {
    var $flake = $('<a style="text-decoration: none;" href="/flake"><div id="flake" /></a>').css({
        'position': 'absolute',
        'top': '-50px',
        'z-index': '100'
    }).html('&#10052;'),
    documentHeight = $(document).height(),
    documentWidth = $(document).width(),
    defaults = {
       minSize: 30,
       maxSize: 50,
       newOn: function(){return Math.floor(Math.random() * 14000) + 7000},
       flakeColor: "#CE1126"
    },
    options = $.extend({}, defaults, options);

    function newFlake() {
        var startPositionLeft = Math.random() * documentWidth - 100,
            startOpacity = 0.5 + Math.random(),
            sizeFlake = options.minSize + Math.random() * options.maxSize,
            endPositionTop = documentHeight - 40,
            endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
            durationFall = documentHeight * 10 + Math.random() * 5000;
        $flake
            .clone()
            .appendTo('body')
            .css({
                left: startPositionLeft,
                opacity: startOpacity,
                'font-size': sizeFlake,
                color: options.flakeColor
            })
            .animate({
                    top: endPositionTop,
                    left: endPositionLeft,
                    opacity: 0.2
                },
                durationFall,
                'linear',
                function () {
                    $(this).remove()
                }
        );
        setTimeout(newFlake, options.newOn());
    };
    setTimeout(newFlake, options.newOn());
}(jQuery);