Javascript 如何根据单击按钮的行清除计时器的间隔

我对javascript和jquery有基本的了解，但到目前为止，我所做的只是客户端验证和偶尔对servlet的ajax调用。我需要显示多个倒计时（动态生成）。 我的页面将有许多计时器（每个都有自己的开始/暂停/恢复/停止按钮）。我可以单独启动计时器，但无法单独暂停计时器

已从stackoverflow中引用此链接。（） 我在上面的插件中创建了另一个设置

“pause:null”

    (function($) {
        $.fn.upCount = function(options, callback) {
            var settings = $.extend({
                startTime: null,
                resume: null,
                pause: false
            }, options);


            var container = this;
            globalContainer = container.parent().html();


            var currentDate = function() {
                // get client's current date
                var date = new Date();
                return date;
            };



            if(settings.startTime){
                resumeTimer(new Date(settings.startTime));
            }

            var original_date = currentDate();

            var paus = settings.pause;
            if(paus){
                alert("In settings.pause" + paus);
                var target_date = new Date('12/31/2014 12:00:00');
                paus = true;
            }else{
                var target_date = new Date('12/08/2015 14:55:00'); // Count up to this date
            }

            // Given a start time, lets set the timer
            function resumeTimer(startTime){
                alert('Resume Timer Needs to Start From StartTime  ' +startTime)
            }

            // Start the counter
            function countUp() {

                // Set our current date
                var current_date = currentDate(); 
                //alert("In countUp paus--" + paus);
                // difference of dates
                var difference = current_date - new Date(settings.startTime);

                if (current_date >= target_date) {
                    // stop timer
                    alert("In stop timer --" + target_date);
                    clearInterval(interval);
                    interval = 0;
                    if (callback && typeof callback === 'function') callback();
                    return;
                }
//Code for Counting timer
            };

                interval = setInterval(countUp, 1000);



        };

    })(jQuery);

我能够根据行索引和启动按钮id独立启动计时器

我的启动计时器代码：

    function startTimer(id, rowIndex){
    var startTimeId = 'id="list:'+rowIndex+':projectStartTime"';
        var y = $('['+startTimeId+']').text();
        //alert("value of y##" + y);

        if(y.length > 0){
            //$('#'+id).upCount({startTime: '12/04/2015 07:00:00', resume: true});
            $('#'+id).upCount({startTime: $('['+startTimeId+']').text()});
        }
      }

以上代码帮助我独立启动多个计时器。但我无法单独暂停计时器。如果我点击任何暂停，所有计时器都会停止。我使用

clearInterval（interval）

暂停计时器

暂停功能：

function pause(id, rowIndex){
    alert("In Function" + id);
    var timer = $('#'+id+' span').text();

    $('#'+id).upCount({startTime: '12/04/2015 07:00:00',pause: true});
}

需要帮助：

我想知道如何仅清除单击按钮所在行的间隔，即单击“暂停”按钮后计时器应暂停

JSF命令按钮代码：

<p:commandButton id="startBtn" action="#{timeBB.addTask}" value="Start"  style="align:center;" styleClass="button" onstart="startTimer(#{impl.timerId},#{rowIndex});">
       <f:param name="currentRow" value="#{impl.timerId}"/>
</p:commandButton>

<p:commandButton id="pauseBtn" value="Pause" action="#{timeBB.pause}" style="align:center;" styleClass="buttonStyle" onstart="pause(#{impl.timerId},#{rowIndex});">
    <f:param name="currentProjectRowIndex" value="#{impl.timerId}" />
</p:commandButton>

---

有人能指出我做错了什么吗？

你发布的代码和逻辑似乎都搞错了。你能提供MCVE吗@剃刀：请复习你的问题。格式不正确。请创建一种方法，消除其中的大量噪音和缺少的很多东西（它与jsf有什么关系？commandButton在哪里？@Kukeltje:添加了jsf commandButton。感谢添加此项，但也请尝试实现M in。。。你是说如果你把startTimer（#{impl.timerId}，#{rowIndex}）叫做（或者在实际的html中是什么）从浏览器控制台？我可以调用startTimer（）。它工作得很好。但是pause（）不起作用。您发布的代码和逻辑似乎都搞砸了。你能提供MCVE吗@剃刀：请复习你的问题。格式不正确。请创建一种方法，消除其中的大量噪音和缺少的很多东西（它与jsf有什么关系？commandButton在哪里？@Kukeltje:添加了jsf commandButton。感谢添加此项，但也请尝试实现M in。。。你是说如果你把startTimer（#{impl.timerId}，#{rowIndex}）叫做（或者在实际的html中是什么）从浏览器控制台？我可以调用startTimer（）。它工作得很好。但是pause（）不起作用。