Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

簡單介紹JavaScript計時器

2,539 views

Published on

簡單介紹JavaScript計時器

簡單介紹JavaScript計時器

  1. 1. Tommy Lin 林儀泰 FB/Email:tooto1985@gmail.com
  2. 2.  setTimeout ◦ 設定延遲執行  setInterval ◦ 設定定時執行  clearTimeout ◦ 清除延遲執行  clearInterval ◦ 清除定時執行
  3. 3.  setTimeout為例 ◦ 設定某一個function過n毫秒後執行
  4. 4. function run() { console.log(“ok”); } setTimeout(run, 2000);
  5. 5. function run() { console.log(“ok”); } setTimeout(run, 2000);
  6. 6. function run() { console.log(“ok”); } setTimeout(run, 2000); //過兩秒後
  7. 7. function run() { console.log(“ok”); } setTimeout(run, 2000); //過兩秒後 “ok”
  8. 8.  setTimeout為例 ◦ 設定某一個function過n毫秒後執行  setInterval為例 ◦ 設定某一個function每n毫秒後執行
  9. 9. function run() { console.log(“ok”); } setInterval(run, 2000);
  10. 10. function run() { console.log(“ok”); } setInterval(run, 2000);
  11. 11. function run() { console.log(“ok”); } setInterval(run, 2000); //過兩秒後
  12. 12. function run() { console.log(“ok”); } setInterval(run, 2000); //過兩秒後 “ok”
  13. 13. function run() { console.log(“ok”); } setInterval(run, 2000); //過兩秒後 “ok” //過兩秒後
  14. 14. function run() { console.log(“ok”); } setInterval(run, 2000); //過兩秒後 “ok” //過兩秒後 “ok”
  15. 15. function run() { console.log(“ok”); } setInterval(run, 2000); //過兩秒後 “ok” //過兩秒後 “ok” //過兩秒後
  16. 16. function run() { console.log(“ok”); } setInterval(run, 2000); //過兩秒後 “ok” //過兩秒後 “ok” //過兩秒後 “ok”......
  17. 17.  setTimeout為例 ◦ 設定某一個function過n毫秒後執行  setInterval為例 ◦ 設定某一個function每n毫秒後直行  clearTimeout為例 ◦ 清除某個setTimeout
  18. 18. function run() { console.log(“ok”); } var id = setTimeout(run, 2000);
  19. 19. function run() { console.log(“ok”); } var id = setTimeout(run, 2000);
  20. 20. function run() { console.log(“ok”); } var id = setTimeout(run, 2000); clearTimeout(id);
  21. 21. function run() { console.log(“ok”); } var id = setTimeout(run, 2000); clearTimeout(id);
  22. 22.  setTimeout為例 ◦ 設定某一個function過n毫秒後執行  setInterval為例 ◦ 設定某一個function每n毫秒後直行  clearTimeout為例 ◦ 清除某個setTimeout  clearInterval為例 ◦ 清除某個setInterval
  23. 23. function run() { console.log(“ok”); } var id = setInterval(run, 2000);
  24. 24. function run() { console.log(“ok”); } var id = setInterval(run, 2000);
  25. 25. function run() { console.log(“ok”); } var id = setInterval(run, 2000); clearInterval(id);
  26. 26. function run() { console.log(“ok”); } var id = setInterval(run, 2000); clearInterval(id);
  27. 27.  無法改變function的this嗎?
  28. 28. document.body.addEventListener(“click”,function(){ console.log(this); function run() { console.log(this); } setTimeout(run, 2000); });
  29. 29. document.body.addEventListener(“click”,function(){ console.log(this); //body function run() { console.log(this); } setTimeout(run, 2000); });
  30. 30. document.body.addEventListener(“click”,function(){ console.log(this); //body function run() { console.log(this); //window !!! } setTimeout(run, 2000); });
  31. 31.  無法改變function的this嗎? ◦ 使用bind解決!
  32. 32. document.body.addEventListener(“click”,function(){ console.log(this); function run() { console.log(this); } setTimeout(run.bind(this), 2000); });
  33. 33. document.body.addEventListener(“click”,function(){ console.log(this); function run() { console.log(this); //body } setTimeout(run.bind(this), 2000); });
  34. 34.  無法改變function的this嗎? ◦ 使用bind解決!  沒有辦法傳入參數?
  35. 35. function run(a, b) { console.log(a ,b); } setTimeout(run, 2000);
  36. 36. function run(a, b) { console.log(a ,b); //undefined undefined } setTimeout(run, 2000);
  37. 37.  無法改變function的this嗎? ◦ 使用bind解決!  沒有辦法傳入參數? ◦ 使用全域變數!
  38. 38. var a=10, b=20; function run() { console.log(a ,b); } setTimeout(run, 2000);
  39. 39. var a=10, b=20; function run() { console.log(a ,b); //10 20 } setTimeout(run, 2000);
  40. 40.  無法改變function的this嗎? ◦ 使用bind解決!  沒有辦法傳入參數? ◦ 使用全域變數! ◦ 使用bind傳入!
  41. 41. function run(a, b) { console.log(a ,b); } setTimeout(run.bind(this, 10, 20), 2000);
  42. 42. function run(a, b) { console.log(a ,b); //10 20 } setTimeout(run.bind(this, 10, 20), 2000);
  43. 43.  無法改變function的this嗎? ◦ 使用bind解決!  沒有辦法傳入參數? ◦ 使用全域變數! ◦ 使用bind傳入! ◦ 使用setTimeout第三個以後的參數!
  44. 44. function run(a, b) { console.log(a ,b); } setTimeout(run ,2000 ,10 ,20);
  45. 45. function run(a, b) { console.log(a ,b); //10 20 } setTimeout(run ,2000 ,10 ,20);
  46. 46.  setTimeout/setInterval會造成程式非同步執行  執行編號非每次都是從0開始(不同瀏覽器起始值都 不一樣)
  47. 47.  https://developer.mozilla.org/en- US/docs/Web/API/WindowTimers/setTimeout

×