簡單介紹JavaScript計時器

1. Tommy Lin
林儀泰
FB/Email：tooto1985@gmail.com

2.  setTimeout
◦ 設定延遲執行
 setInterval
◦ 設定定時執行
 clearTimeout
◦ 清除延遲執行
 clearInterval
◦ 清除定時執行

3.  setTimeout為例
◦ 設定某一個function過n毫秒後執行

4. function run() {
console.log(“ok”);
}
setTimeout(run, 2000);

5. function run() {
console.log(“ok”);
}
setTimeout(run, 2000);

6. function run() {
console.log(“ok”);
}
setTimeout(run, 2000);
//過兩秒後

7. function run() {
console.log(“ok”);
}
setTimeout(run, 2000);
//過兩秒後
“ok”

8.  setTimeout為例
◦ 設定某一個function過n毫秒後執行
 setInterval為例
◦ 設定某一個function每n毫秒後執行

9. function run() {
console.log(“ok”);
}
setInterval(run, 2000);

10. function run() {
console.log(“ok”);
}
setInterval(run, 2000);

11. function run() {
console.log(“ok”);
}
setInterval(run, 2000);
//過兩秒後

12. function run() {
console.log(“ok”);
}
setInterval(run, 2000);
//過兩秒後
“ok”

13. function run() {
console.log(“ok”);
}
setInterval(run, 2000);
//過兩秒後
“ok”
//過兩秒後

14. function run() {
console.log(“ok”);
}
setInterval(run, 2000);
//過兩秒後
“ok”
//過兩秒後
“ok”

15. function run() {
console.log(“ok”);
}
setInterval(run, 2000);
//過兩秒後
“ok”
//過兩秒後
“ok”
//過兩秒後

16. function run() {
console.log(“ok”);
}
setInterval(run, 2000);
//過兩秒後
“ok”
//過兩秒後
“ok”
//過兩秒後
“ok”......

17.  setTimeout為例
◦ 設定某一個function過n毫秒後執行
 setInterval為例
◦ 設定某一個function每n毫秒後直行
 clearTimeout為例
◦ 清除某個setTimeout

18. function run() {
console.log(“ok”);
}
var id = setTimeout(run, 2000);

19. function run() {
console.log(“ok”);
}
var id = setTimeout(run, 2000);

20. function run() {
console.log(“ok”);
}
var id = setTimeout(run, 2000);
clearTimeout(id);

21. function run() {
console.log(“ok”);
}
var id = setTimeout(run, 2000);
clearTimeout(id);

22.  setTimeout為例
◦ 設定某一個function過n毫秒後執行
 setInterval為例
◦ 設定某一個function每n毫秒後直行
 clearTimeout為例
◦ 清除某個setTimeout
 clearInterval為例
◦ 清除某個setInterval

23. function run() {
console.log(“ok”);
}
var id = setInterval(run, 2000);

24. function run() {
console.log(“ok”);
}
var id = setInterval(run, 2000);

25. function run() {
console.log(“ok”);
}
var id = setInterval(run, 2000);
clearInterval(id);

26. function run() {
console.log(“ok”);
}
var id = setInterval(run, 2000);
clearInterval(id);

27.  無法改變function的this嗎？

28. document.body.addEventListener(“click”,function(){
console.log(this);
function run() {
console.log(this);
}
setTimeout(run, 2000);
});

29. document.body.addEventListener(“click”,function(){
console.log(this); //body
function run() {
console.log(this);
}
setTimeout(run, 2000);
});

30. document.body.addEventListener(“click”,function(){
console.log(this); //body
function run() {
console.log(this); //window !!!
}
setTimeout(run, 2000);
});

31.  無法改變function的this嗎？
◦ 使用bind解決！

32. document.body.addEventListener(“click”,function(){
console.log(this);
function run() {
console.log(this);
}
setTimeout(run.bind(this), 2000);
});

33. document.body.addEventListener(“click”,function(){
console.log(this);
function run() {
console.log(this); //body
}
setTimeout(run.bind(this), 2000);
});

34.  無法改變function的this嗎？
◦ 使用bind解決！
 沒有辦法傳入參數？

35. function run(a, b) {
console.log(a ,b);
}
setTimeout(run, 2000);

36. function run(a, b) {
console.log(a ,b); //undefined undefined
}
setTimeout(run, 2000);

37.  無法改變function的this嗎？
◦ 使用bind解決！
 沒有辦法傳入參數？
◦ 使用全域變數！

38. var a=10, b=20;
function run() {
console.log(a ,b);
}
setTimeout(run, 2000);

39. var a=10, b=20;
function run() {
console.log(a ,b); //10 20
}
setTimeout(run, 2000);

40.  無法改變function的this嗎？
◦ 使用bind解決！
 沒有辦法傳入參數？
◦ 使用全域變數！
◦ 使用bind傳入！

41. function run(a, b) {
console.log(a ,b);
}
setTimeout(run.bind(this, 10, 20), 2000);

42. function run(a, b) {
console.log(a ,b); //10 20
}
setTimeout(run.bind(this, 10, 20), 2000);

43.  無法改變function的this嗎？
◦ 使用bind解決！
 沒有辦法傳入參數？
◦ 使用全域變數！
◦ 使用bind傳入！
◦ 使用setTimeout第三個以後的參數！

44. function run(a, b) {
console.log(a ,b);
}
setTimeout(run ,2000 ,10 ,20);

45. function run(a, b) {
console.log(a ,b); //10 20
}
setTimeout(run ,2000 ,10 ,20);

46.  setTimeout/setInterval會造成程式非同步執行
 執行編號非每次都是從0開始(不同瀏覽器起始值都
不一樣)

47.  https://developer.mozilla.org/en-
US/docs/Web/API/WindowTimers/setTimeout