重置间隔计时器Don't工作！什么'It’他错了

Reset Interval Timer Don't Work! What's wrong?

本文关键字：It 什么 错了 间隔计时器 Don 工作      更新时间：2023-09-26

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

由于您已经在函数外定义了interval，因此不需要在函数中创建新的var interval。

只需移除timer函数中的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()
});

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

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

您的代码中有两个错误。1.间隔定义两次。2.重置时忘记将时间重置为59

这是jsfiddlehttp://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()
});
相关文章：