нужен таймер нокаута для проекта

Question

Мне нужен таймер нокаута для моего проекта, который может перезапуститься после того, как он достигнет 0 щелчком. У меня есть следующий код, но это не поможет. Может кто-нибудь мне помочь.

this.countDown = ko.observable(); 

ko.bindingHandlers.timer = { 

    update: function (element, valueAccessor) { 
     var sec = $(element).text(); 
     var timer = setInterval(function() { 

      $(element).text(--sec); 
      if (sec == 0) { 
       clearInterval(timer); 

      } 
     }, 1000); 
    } 
}; 

Answer 1

Если вы хотите использовать подход от вашего вопроса заменить эту строку:

clearInterval(timer) 

с чем-то вроде этого:

sec = 61; 

Смотреть это на работе:

ko.bindingHandlers.timer = { 
 

 
    update: function (element, valueAccessor) { 
 
     var sec = $(element).text(); 
 
     var timer = setInterval(function() { 
 

 
      $(element).text(--sec); 
 
      if (sec == 0) { 
 
       sec = 61; 
 
      } 
 
     }, 1000); 
 
    } 
 
}; 
 

 
var vm = { countDown: ko.observable() }; 
 

 
ko.applyBindings(vm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div id="timer"> <span data-bind="timer: countDown">60 </span> </div>

Однако я бы рекомендовал инкапсулировать эту логику в ViewModel, а не в пользовательскую привязку. Например, этот вид вид модели будет работать:

function ViewModel() { 
 
    var self = this; 
 
     
 
    self.timer = ko.observable(60); 
 
     
 
    setInterval(function() { 
 
     var newTimer = self.timer() - 1; 
 
     self.timer(newTimer <= 0 ? 60 : newTimer); 
 
    }, 1000); 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div id="timer"> <span data-bind="text: timer"></span> </div>