Question

我有以下代码示例可一次取消1条警报：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-`scale=1.0">`
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <p>Click the first button alert "Hello" after 3 second</p>
        <p>Click the second button to cancel the alert</p>
        <button onclick="myFunction()">Try it</button>
        <button onclick="myStopFunction()">Stop the Alert</button>
        <script>
        var myVar;
        function myFunction(){
            myVar=setTimeout(function(){alert("Hello")},3000);
        }
        function myStopFunction(){
            clearTimeout(myVar);
        }
        </script>
    </body>
    </html>

例如，如果您按一下，我想取消所有警报例如3或4次，它将有4或3次提醒，但是如果您按一下并在按钮上发出3次警报和3次警报停止我的警报取消。因此点击次数将相等。我想创建一个函数，如果您按一下，请尝试一下然后按1次停止警报，无论如何警报都会取消。我尝试实现此代码，但没有解决，所以请帮忙。

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-`scale=1.0">`
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <p>Click the first button alert "Hello" after 3 second</p>
        <p>Click the second button to cancel the alert</p>
        <button onclick="myFunction()">Try it</button>
        <button onclick="myStopFunction()">Stop the Alert</button>
        <script>
        var myVar;
        var c`enter code here`ounter=0;
        function myFunction(){
            myVar=setTimeout(function(){alert("HEllo")},3000);
            counter++;
        }
        function myStopFunction(){
            for(var i =0;i<counter+1;i++){   
                     clearTimeout(myVar);
                     counter--;
                     }
        }
        </script>
    </body>
    </html>

Answer 1

实际上，您的代码仅删除了最后一个timeoutID。

您可以将timeoutID放入数组中。在将所有timeoutID清除为循环之后。

var arrTimeout = [];

function myFunction() {
  var myVar = setTimeout(function() {
    console.log("Hello");
  }, 3000);
  arrTimeout.push(myVar);
}

function myStopFunction() {
  arrTimeout.forEach((timeoutID) => {
    clearTimeout(timeoutID);
  })

  arrTimeout = [];
}

<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the Alert</button>

旧JS版本

var arrTimeout = [];

function myFunction() {
  var myVar = setTimeout(function() {
    alert("Hello");
  }, 3000);
  arrTimeout.push(myVar);
}

function myStopFunction() {
  for (var l = arrTimeout.length; l--;) {
    clearTimeout(arrTimeout[l]);
  }
  arrTimeout = [];
}

<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the Alert</button>

Javascript：当我多次按下警报时，询问如何完全取消警报，我应该取消该函数的所有调用

1 个答案:

旧JS版本