如何以随机时间间隔进行倒计时，停在零？

Question

我想在这段代码中添加另一个计数器：

        function animateValue(id) {
      var obj = document.getElementById(id);
      var counter = getLocalStoregaValue();
      var current = counter ? +counter : obj.innerHTML;
      obj.innerHTML = counter;
      setInterval(function() {
          var counter = current--;
        obj.innerHTML = counter;
        localStorage.setItem('counter', counter);
      }, 1000);
    }

function getLocalStoregaValue() {
  return localStorage.getItem('counter');
}

animateValue('value');

我希望它每秒缩放一次（如本例所示）和每 5 秒一次。我怎样才能？然后，我怎样才能让它停在0？所以没有负数。非常感谢。

编辑：我解释错了。 我想要一个数量从最少 10 个下降到最多 20 个的单个计数器。

示例：计数器标记为 50。15 秒后标记为 49。18 秒后标记为 48。11 秒后标记为 47。等等直到 0。 我希望这次我能很好地解释自己:)

Answer 1

好的，我在发布答案时被打断了。现在解释一下：

我省略了你问题的localStorage部分，先集中讨论“独立倒计时”的生成：

function cntdwn(sel,stp,intv){
 let el=document.querySelector(sel),
     n=el.textContent-stp,
     cd=setInterval(()=>{
  el.textContent=n;
  if((n-=stp)<0) clearInterval(cd);
 }, intv);
}
cntdwn('#one',1,1000) ;
setTimeout(()=>cntdwn('#two',1,3000), 12000);

<p>first countdown:<br>step: 1, interval: 1s</p>
<p id="one">15</p>
<p>second countdown:<br>step: 1, action after: 15, 18, 21, 24 ... s (as mentioned in comment)</p>
<p id="two">50</p>

cntdwn() 函数提供了一个范围，可以为任意 DOM 元素设置单独的倒计时，每个倒计时都有自己的计数器（以在 DOM 元素中找到的值开始）、步长和间隔（以毫秒为单位） )。

每个倒计时都是用let cd=setInterval(...) 生成的。一旦发现n 的值低于零，就可以使用引用cd 停止倒计时（在clearInterval(cd) 中）。

编辑：
假设您在间隔序列中打错了字，并且确实的意思是：15、18、21 秒，那么编辑后的第二个倒计时应该是正确的解决方案。

我使用setTimeout() 函数将动作延迟了 12 秒，然后在第一个 3 秒间隔后（即总共 15 秒后）发生第一次更改。然后倒计时以 3 秒为间隔继续，直到达到零。

又一次修改：

好的，所以你想要：“随机时间间隔（范围为 10 到 20 秒）的倒计时将在零处停止”

应该这样做：

function cntdwn(sel,int1,int2){
 let el=document.querySelector(sel),
     n=el.textContent-1,
     cd=()=>setTimeout(()=>{
  el.textContent=n;
  if(n--) cd();
 }, 1000*(int1+Math.random()*(int2-int1)));
 cd();
}
cntdwn('#one',10,20);

<p>countdown:<br>step: 1, intervals: between 10 and 20 s</p>
<p id="one">5</p>

Answer 2

如果你可以使用 ES2017，你可以使用 asynchronous function 来做到这一点，像这样：

async function animateValue(id) {
      function timeout(t){
          return new Promise(r => setTimeout(r, t))
      }
      var obj = document.getElementById(id);
      var counter = getLocalStoregaValue();
      for(let i = +counter || +obj.innerHTML || 0; i >= 0; i--){
        obj.innerHTML = i;
        localStorage.setItem('counter', i);

        await timeout((Math.random() * 10 + 10) * 1000); //Pause for 10 to 20 seconds. For an integer second value, wrap `Math.random() * 10` into a `Math.floor` call
      };
}

function getLocalStoregaValue() {
  return localStorage.getItem('counter');
}

animateValue('value').catch(console.error);

<div id="value">50</div>

试试看（我注释掉了 localStorage 部分，因为 Stack Snippets 中不允许这样做）：

async function animateValue(id) {
      function timeout(t){
          return new Promise(r => setTimeout(r, t))
      }
      var obj = document.getElementById(id);
      var counter = getLocalStoregaValue();
      for(let i = +counter || +obj.innerHTML || 0; i >= 0; i--){
        obj.innerHTML = i;
        //localStorage.setItem('counter', i);

        await timeout((Math.random() * 10 + 10) * 1000); //Pause for 10 to 20 seconds. For an integer second value, wrap `Math.random() * 10` into a `Math.floor` call
      };
}

function getLocalStoregaValue() {
  //return localStorage.getItem('counter');
}

animateValue('value').catch(console.error);

<div id="value">50</div>