Question

我写了一个函数，通过按下按钮将数字向下或向上倒数。看看这个：

var timer;
function counterFn(element,oldCount,newCount,speed) {
    if(isNaN(speed)) speed=100;
    clearInterval(timer);
    if(oldCount===newCount) {
        element.text(newCount);
        return;
    }
    var counter=oldCount;
    timer=setInterval(function() {
        if(oldCount<newCount) {
            if(counter>newCount)
                clearInterval(timer);
            counter++;
        } else {
            if(counter<newCount)
                clearInterval(timer);
            counter--;
        }
        if(counter===newCount) {
            clearInterval(timer);
        }
        element.text(counter);
    },speed);
}
$('.button').on("click",function() {
  counterFn('.endelement',10,100,1);
});

功能属性的描述：

element : the element which will show the result
oldCount : is the start number
newCount : is the end number
speed : is the repeat time of setInterval

现在，根据上面的代码，如果你按.button类的元素，counterFn函数就会运行。现在，如果你再次按下按钮（在通过功能清除setinterval之前），那么每件事都可以。

这是工作演示：http://jsfiddle.net/hgh2hgh/gpvn9hcq/4/ 如您所见，单击按钮，清除上一个间隔并运行新的间隔。

现在如果第二个元素调用这样的函数：

$('.button2').on("click",function() {
  counterFn('.endelement2',50,70,2);
});

自然第二个请求将停止计时器并使用新属性运行新计时器。因为只为一个setInterval定义了一个全局变量。

查看本部分拆解的评论：评论中的[1]

如果变量的定义在函数内部，按下按钮两次，意味着运行该函数两个单独的时间。

查看本部分拆除的评论：[2]在评论中

好的，现在如何正确运行此功能？

感谢。

运行倒计时或倒计时功能

0 个答案: