JavaScript DOM | Window Object

使用Window 的方法可以省略掉 Window 字眼
EX:

window.alert('Hi!');//Hi!
alert('Hi!');//Hi!

setInterval() 与 clearInterval()

setInterval() 方法可按照指定的周期 (以毫秒计) 呼叫某函式。
setInterval() 会不断调用函数,直到 clearInterval() 被呼叫或 Window 被关闭。

语法:
setInterval(函数,毫秒);

EX:

function sayHi(){
setInterval(function(){
alert('Hi!');
},1000)
};

sayHi();//每秒都会 alert 'Hi!'


下面是使用 clearInterval()

<!DOCTYPE html>
<html>
<body>



<p id="demo"></p>

<button onclick="myStopFunction()">Stop</button>

<script>
var myVar = setInterval(num, 1000);
var d=0;
function num() {
  d++;
  document.getElementById("demo").innerHTML = d;
}

function myStopFunction() {
  clearInterval(myVar);
}
</script>

</body>
</html>


如果用 addEventListener() 注册事件

语法document.addEventListener(触发事件, 触发时执行的函数, useCapture[可选])
上面的范例用 addEventListener() 可以这样写:

<!DOCTYPE html>
<html>
<body>



<p id="demo"></p>

<button>Stop</button>

<script>
var myVar = setInterval(num, 1000);
var d=0;
function num() {
  d++;
  document.getElementById("demo").innerHTML = d;
}

document.querySelector("button").addEventListener("click",myStopFunction);

function myStopFunction() {
  clearInterval(myVar);
}
</script>

</body>
</html>


参考资料:
W3schools | Window clearInterval() Method

W3schools Window | setInterval() Method

W3schools | document.addEventListener() Method


<<:  Day_28:让 Vite 来开启你的Vue之 跌入深坑_生命周期 hooks 与 async/await

>>:  Day25:NavigationView

[Day 13] 资料产品生命周期管理-加工资料(二)

接续上篇 介绍一下一般开发 ETL 的流程。每只 ETL 都可以看作是独立的程序,有独立的开发流程。...

【Vue】v-text 、v-html与 {{ }} (Mustache)

【前言】 本系列为个人前端学习之路的学习笔记,在过往的学习过程中累积了很多笔记,如今想藉着IT邦帮忙...

2021-Day12. ~Take a break~复习。

团体组的Spring代表「V大」昨天问我:「To b, or not to b. 那麽to C呢??...

【Day 30】实作 - 如何在 AWS Quicksight 设定告警以及结语

昨天我们提到 AWS CloudWatch Alarms,今天我们就来介绍 AWS QuickSig...

Day 29【Deploy NFT - Deploy on Mainnet】你看,出来了

【前言】 今天要来分享怎麽把我们之前的种种都推上主网啦!但是因为我的企划还没有确认上架时间,这边可...