New random number jQuery

Question

Here's my code

(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);

I am trying to get it to spit out a snow flake at a random interval like 7000 and 14000 milliseconds, the problem is when I call the function it gets a random number between 7000 and 14000 and uses that same value over and over again. So say it returns 12806, it will spit out a snow flake every 12806 milliseconds. I want a new number each time. How would I go about accomplishing this? I cannibalized this code from something kinda different and am not very experienced with JavaScript or jQuery. Any help is appreciated.

Answer 1

Yes I would use setTimeout and call the function itself with a new timeout value. Also I would set newOn to a function instead of a variable since it will only be calculated once as a variable.

See if this fiddle behaves like you want: http://jsfiddle.net/e9KE9/1/

In the fiddle I set the first Timeout to 0 so that the first would appear immediately.

P.s.s this feels more like snow: http://jsfiddle.net/e9KE9/2/ Pretty cool idea!

$.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);

Answer 2

The problem is setInterval, which does exactly what you are complaining about. I think you'd rather use setTimeout. From the Mozilla Developer Network:

setTimeout() calls a function or executes a code snippet after specified delay.

setInterval() calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.