Question

我不想制作脚本计时器和重置按钮。当我点击重置时，计时器将被重置并再次运行。我是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

Answer 1

由于您已在函数外定义interval，因此无需在函数中创建新的var interval。只需删除var内的timer功能即可。查看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()
});

Answer 2

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

即可

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

Answer 3

您的代码中有两个错误。 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()
});

重置间隔定时器不起作用！怎么了？

3 个答案: