该项目需要一个淘汰计时器 [英] need a knockout timer for the project

问题描述

我的项目需要一个淘汰计时器，它可以在单击达到 0 后重新启动.我有以下代码，但这不会重新启动.有人可以帮助我.

this.countDown = ko.observable();ko.bindingHandlers.timer = {更新:函数(元素，valueAccessor){var sec = $(element).text();var timer = setInterval(function () {$(element).text(--sec);如果(秒 == 0){清除间隔(定时器)；}}, 1000);}};

解决方案

如果您想使用问题中的方法，请替换此行:

clearInterval(timer)

像这样:

sec = 61;

在工作中看到这个:

ko.bindingHandlers.timer = {更新:函数(元素，valueAccessor){var sec = $(element).text();var timer = setInterval(function () {$(element).text(--sec);如果(秒 == 0){秒 = 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="计时器"><span data-bind="timer: countDown">60 </span>

但是，我建议将这种逻辑封装在 ViewModel 中，而不是自定义绑定中.例如，这种视图模型可以工作:

function ViewModel() {var self = this;self.timer = ko.observable(60);设置间隔(函数(){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="计时器"><span data-bind="text: timer"></span>

I need a knockout timer for my project which can restart after it reaches 0 on a click. I have the following code but this wont restar. Can somebody help me.

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

解决方案

If you want to use the approach from your question replace this line:

clearInterval(timer)

with something like this:

sec = 61;

See this at work:

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>

However, I'd recommend encapsulating this kind of logic in the ViewModel, not in a custom binding. For example this kind of view model would work:

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>

这篇关于该项目需要一个淘汰计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！