JavaScript clearInterval

Question

我希望在单击按钮时显示div，并使用setInterval附加句点来显示加载。我还想要一个按钮来清除该间隔并隐藏显示的div。

这是一个小提琴 http://jsfiddle.net/4qx4r/4/

这是代码：

function ProgressBar(){
   var div;
    var start = function(){
               var count = 0,
               div = $('#divNotification').show().text('Uploading').css('align','center'),
                   originalText = div.text(),
                   count = 0;

               var beginCount = setInterval(function(){
                   var newText = div.text() + '.';
                   div.text(newText);
                   count++;
                   if(count > 5){
                     div.text(originalText);
                     count =0;
                   }
                   console.log(count);
               },500)
       }
       var stop = function(){
           console.log('stop');
           div.hide();
           window.clearInterval(beginCount);
       }
   this.start = start;
   this.stop = stop;
}

var progressBar = new ProgressBar();
$('#btnStart').click(function(){
   progressBar.start();  
});
$('#btnStop').click(function(){
   progressBar.stop();
});

目前当我点击btnStop时，我得到“无法读取未定义的属性隐藏”。如何使此停止间隔并隐藏div？

Answer 1

您正在函数中设置var beginCount，因此该变量只能在该函数中访问。

尝试在外部声明该变量，或者只是删除var部分。

我会将它添加到var div声明

旁边

此外，您需要用分号替换逗号，而div未设置为该对象，请尝试以下操作：

var count = 0;
div = $('#divNotification');
div.show().text('Uploading').css('align','center');
originalText = div.text();
count = 0;

http://jsfiddle.net/4qx4r/6/

Answer 2

这有效：http://jsfiddle.net/W8ySn/3/

我将初始div分配分开了：

    div = $('#divNotification');
           var count = 0;                                      
           div.show().text('Uploading editor').css('align','center');
               originalText = div.text();
               count = 0;