主要问题是你的ViewModel代码，它使用 observable 你想要一个函数（启动和停止计数器）。此外，它似乎没有明确定义它想要做什么。

The main problem is your ViewModel code, it uses an observable where you wanted a function (to Start and Stop the counter). Also, it does not seem to have a clear definition of what it is trying to do.

此外，我假设您希望开始按钮显示何时停止计时器，以及显示定时器启动时间的停止按钮 - 所以我也可以***添加此功能。

Also, im assuming you wanted the Start button to show when the timer is stopped, and the Stop button to show when the timer is started - so ive taken the liberty to add this functionality too.

这是重写的视图模型：

var RefreshPageTimerViewModel = function () {
    var self = this;

    self.timerId = 0;
    self.elapsedTime = ko.observable(0);
    self.initialTime = ko.observable(0);
    self.remainingTime = ko.computed(function(){
        return self.initialTime() - self.elapsedTime();
    });
    self.isRunning = ko.observable(false);

    self.StartCounter = function(){
        self.elapsedTime(0);
        self.isRunning(true);
        self.timerId = window.setInterval(function(){
            self.elapsedTime(self.elapsedTime()+1);
            if(self.remainingTime() == 0){
                clearInterval(self.timerId);
                self.isRunning(false);
                self.Callback();
            }
        },1000)
    }
    self.StopCounter = function(){
        clearInterval(self.timerId);
        self.isRunning(false);
    }
    self.Callback = function(){}
}

有几点需要注意：

• 有一个属性 timerId ，这不需要是可观察的，但允许我们停止用于递增 elapsedTime的计时器

• Has a property timerId, which does not need to be observable, but allows us to stop the timer which is used to increment the elapsedTime

有一个可观察的属性 isRunning 用于控制开始和停止按钮的可见性

has an observable property isRunning used to control the visibility of the Start and Stop buttons

有一个空函数 Callback ，当倒计时到零时，它可用于执行任何函数。

has an empty function Callback which can be used to execute any function when the countdown reaches zero.

以下是新标记：

<div id="pnlTimer" class="row">
  <div class="span2 pull-right" style="border:1px solid rgb(218, 218, 218)" >
    <span style="font-weight:bold">Reload Interval</span>
    <br />
    <input  id="initialTime" style="width:20px;height:14px" data-bind="value:  initialTime" />
    <span id="remainingTime" data-bind="text: remainingTime"></span> second(s)
    <button class="btn" style="margin-top:5px" id="StartCounter" data-bind="click: StartCounter, visible: !isRunning()">
       start
    </button>
    <button style="margin-top:5px" class="btn"  id="StopCounter" data-bind="click: StopCounter, visible:isRunning()">
       Stop 
    </button>
  </div>
</div>

注意添加可见：！isRunning（）到开头， visible：isRunning（）到停止按钮。

Note the addition of visible: !isRunning() to the start and visible:isRunning() to the stop buttons.

最后，这是初始代码：

$(function(){
     var viewModelTimer = new RefreshPageTimerViewModel();
    viewModelTimer.Callback = function(){
        alert("finished");
    };
    ko.applyBindings(viewModelTimer);
})

注意创建一个只提醒的回调函数。您的代码可以是原样，即 viewModelTimer.callBackMethod = viewModel.filter;

Note the creation of a callback function which simply alerts. Your code could be as it was, ie viewModelTimer.callBackMethod = viewModel.filter;

最后，一个实例允许你玩游戏： http://jsfiddle.net/eF5Ec/

Finally, a live example to allow you to play around: http://jsfiddle.net/eF5Ec/