Новое случайное число 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 миллисекунд. Я хочу новый номер каждый раз. Как я могу это сделать? Я cannibalized этот код от чего-то другого и не очень опытный с JavaScript или jQuery. Любая помощь приветствуется.

Answer 1

Проблема setInterval, которая делает именно то, о чем вы жалуетесь. Я думаю, вы предпочтете использовать setTimeout. Из Mozilla Developer Network:

setTimeout() вызывает функцию или выполняет фрагмент кода после указанной задержки.

setInterval() вызывает функцию или выполняет фрагмент кода несколько раз, с фиксированной временной задержкой между каждым вызовом этой функции.

Answer 2

Да, я бы использовал setTimeout и вызвал функцию с новым значением таймаута. Также я бы установил newOn в функцию вместо переменной, так как она будет вычисляться только как переменная.

Смотрите, если эта скрипка ведет себя, как вы хотите: http://jsfiddle.net/e9KE9/1/

В скрипке я установил первый тайм-аут в 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);