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 Developer Network：

setTimeout()在指定的延迟后调用函数或执行代码段。

setInterval()重复调用函数或执行代码片段，每次调用该函数之间都有固定的时间延迟。

Answer 2

是的我会使用setTimeout并使用新的超时值调用函数本身。此外，我将newOn设置为函数而不是变量，因为它只会作为变量计算一次。

看看这个小提琴是否符合您的要求：http://jsfiddle.net/e9KE9/1/

在小提琴中，我将第一个Timeout设置为0，以便第一个立即出现。

P.s.s这感觉更像是雪：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);

新的随机数jQuery

2 个答案: