重置间隔计时器不工作！怎么了？

我不想制作脚本定时器和重置按钮。当我点击复位时，计时器将被重置并再次运行。我是JavaScript新手，所以对我来说很难。重置间隔计时器不工作！怎么了？

这里是我的html代码：

<div class="item html"> 
    <h2>60</h2> 
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <title>Layer 1</title> 
     <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/> 
    </g> 
    </svg> 
    <button type="butoton" id="previous"> 
    Reset 
    </button>

这里是我的JS代码：

var time = 1; 
var initialOffset = '440'; 
var i = 59; 
var interval; 

var timer = function() { 
    var interval = setInterval(function() { 
    $('h2').text(i); 
    if (i == time) {  
     clearInterval(interval); 
     return; 
    } 
    i--; 
    }, 1000); 
}; 


$('#previous').click(function(){ 
    //go back to previous slide and reset time 
    clearInterval(interval); 
    timer() 
});

这里是我的全码：JSFIDDLE

来源

2016-07-26 Rofi Fathurrohman

正如你所定义interval之外的功能，你不需要在该函数中创建新的var interval。只需删除函数中的var即可。检查Fiddle

var timer = function() { 
    interval = setInterval(function() { 
     $('h2').text(i); 
     if (i == time) {  
     clearInterval(interval); 
      return; 
    } 

    i--; 
}, 1000); 
};

此外，如果你想计时器从60开始再次，你应该定义新的时间i。由于timer函数内你的i

$(document).ready(function() { 
    timer() 
}); 

$('#previous').click(function(){ 
    //go back to previous slide and reset time 
    i=59 
    clearInterval(interval); 
    timer() 
});

来源

2016-07-26 05:02:52 Arif

好工作的家伙，但它不是自动运行？ –

检查答案和再次拨弄，我更新了文档准备就绪后运行定时器 – Arif

ohh thx真的很快回答 –

decreamenting值你重新定义的功能范围interval。因此，js会将它视为一个单独的变量，而不是重用前一个范围/执行上下文中定义的变量。只需删除功能中的var关键字...

var timer = function() { 
    interval = setInterval(function() { 
     $('h2').text(i); 
     if (i == time) {  
      clearInterval(interval); 
      return; 
     } 
     i--; 
    }, 1000); 
};

来源

2016-07-26 05:03:23 deostroll

不工作兄弟 –

当您重置计时器时，也重置'i'的值 – deostroll

您的代码有两个错误。 1.间隔定义两次。 2.忘了复位时间到59，而正在重置

这里的jsfiddle http://jsfiddle.net/wz32sy7y/609/

更新JS代码

var time = 1; 
var initialOffset = '440'; 
var i = 59; 
var interval; 

var timer = function() { 
    interval = setInterval(function() { 
     $('h2').text(i); 
     if (i == time) {  
     clearInterval(interval); 
      return; 
    } 

    i--; 
}, 1000); 
}; 


$('#previous').click(function(){ 
    //go back to previous slide and reset time 
    clearInterval(interval); 
    i=59; 
    timer() 
});

来源

2016-07-26 05:08:01

它的工作，但问题是定时器不自动运行 –

重置间隔计时器不工作！怎么了？

回答

相关问题