我的项目需要一个淘汰计时器，只需单击一下即可在计时器达到 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);
}
};
如果您想使用问题中的方法，请替换此行：
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
