Как решить проблему с запуском скрипта таймера?

Question

[Дима Паутов]

Добрый день! Ломаю голову, как мне запустить таймер.

Есть у меня модуль:

var Template = (function($){
	'use strict';

	return {
		prop1: function(){}, 
		prop2: function(){},

		// Таймер
		timer: function(){
			var getTimeRemaining = function(endtime){
				var t = Date.parse(endtime) - Date.parse(new Date()),
					seconds = Math.floor( (t/1000) % 60 ),
					minutes = Math.floor( (t/1000/60) % 60 ),
					hours = Math.floor( (t/(1000*60*60)) % 24 ),
					days = Math.floor( t/(1000*60*60*24) );

				return {
					'total': t,
					'days': days,
					'hours': hours,
					'minutes': minutes,
					'seconds': seconds
				};
			};

			var init = function(id, endtime){
				var clock = $(id),
					days = clock.find('.days'),
					hours = clock.find('.hours'),
					minutes = clock.find('.minutes'),
					seconds = clock.find('.seconds');

				var updateClock = function(){
					var t = Template.timer.getTimeRemaining(endtime);

					days.html(t.days);
					hours.html(('0' + t.hours).slice(-2));
					minutes.html(('0' + t.minutes).slice(-2));
					seconds.html(('0' + t.seconds).slice(-2));

					if(t.total <= 0){
						clearInterval(timeinterval);
					}
				};

				updateClock();
				var timeinterval = setInterval(updateClock,1000);
			};

			return {
				init: init
			}
		}
	}
})(jQuery);

$(document).on('ready', function(){
	Template.timer('#timer', '2015-12-4');
});

Как мне запустить мой таймер?

Если я запишу функцию так:

var timer = (function(){
    return {
      getTimeRemaining: function(endtime){
        var t = Date.parse(endtime) - Date.parse(new Date()),
          seconds = Math.floor( (t/1000) % 60 ),
          minutes = Math.floor( (t/1000/60) % 60 ),
          hours = Math.floor( (t/(1000*60*60)) % 24 ),
          days = Math.floor( t/(1000*60*60*24) );

        return {
          'total': t,
          'days': days,
          'hours': hours,
          'minutes': minutes,
          'seconds': seconds
        };
      },

      init: function(id, endtime){
        var clock = $(id),
          days = clock.find('.days'),
          hours = clock.find('.hours'),
          minutes = clock.find('.minutes'),
          seconds = clock.find('.seconds');

        var updateClock = function(){
          var t = timer.getTimeRemaining(endtime);

          days.html(t.days);
          hours.html(('0' + t.hours).slice(-2));
          minutes.html(('0' + t.minutes).slice(-2));
          seconds.html(('0' + t.seconds).slice(-2));

          if(t.total <= 0){
            clearInterval(timeinterval);
          }
        };

        updateClock();
        var timeinterval = setInterval(updateClock,1000);
      }
    }
  }());

$(document).on('ready', function(){
	Template.timer('#timer', '2015-12-4');
});

То все ок. Возможно я все усложняю, но мне хочется сделать один модуль для шаблона, в котором будут лежать разные функции, что бы просто их не раскидывать где попало. И столкнулся с проблемой! Как сделать вложенный модуль или подскажите, как лучше реализовать мою задумку, что бы разложить код по полочкам. Благодарю за внимание.

Вот jsfiddle.net/uevm2h0o код 1го примера!

Comments

[Ivan Demidov]

форкнул, думаю вам будет полезнее самому найти отличия jsfiddle.net/5y92bbey

[Дима Паутов]

Ivan Demidov: Понял, большое спс! Могли бы уж ответом записать. Я бы кнопочку "решение" нажал.

[Ivan Demidov]

без проблем )

Answer 1

[Ivan Demidov]

jsfiddle.net/5y92bbey