EXERCISE 1 : Event Loop

1.1 ให้ตอบคำถามลงใน <textarea> ด้านล่างว่าโค้ดที่รันได้จะได้ผลลัพธ์เป็นอย่างไร จากนั้นทดลองรันโค๊ด เปรียบเทียบผลลัพธ์ และอธิบายการทำงาน



1   function first(){
2     setTimeout(() => {
3         console.log(1);
4     }, 1000);
5   }
6
7   const second = setTimeout(() => {
8     console.log(2);
9   }, 1500);
10  
11  var third = setTimeout(() => {
12    console.log(3);
13  }, 1000);
14  
15  setTimeout(() => {
16      console.log(4)
17  }, 0)
18
19  console.log(5)
20  
21  setTimeout(() => {
22      console.log(5+1)    
23  }, 2000)
24
25  function showLog(data) {
26      console.log(data);
27  }
28  
29  function calculator(num1, num2, callback) {
30      var sum = num1 + num2;
31      callback(sum)
32  }
33  
34  calculator(7, 1, showLog);
ให้นักศึกษาเปิด Console และกด Run เพื่อดูการแสดงผล

1.2 ให้ตอบคำถามว่าโค้ดที่รันได้จะได้ผลลัพธ์เป็นอย่างไร จากนั้นทดลองรันโค๊ด เปรียบเทียบผลลัพธ์ และอธิบายการทำงาน

1 setTimeout(() => {
2   console.log("hello")
3 }, 1000)
4
5 let max_loop = 10000000000;
6
7 for(let i = 0; i < max_loop; i++) {
8   let progress = i / max_loop * 100;
9   
10  if(i % (max_loop/100) === 0) {
11    console.log(progress.toFixed(0) + '%')
12  }
13 }
          

ให้นักศึกษาเปิด Console และกด Run เพื่อดูการแสดงผล

1.3 ให้ตอบคำถามว่าโค้ดที่รันได้จะได้ผลลัพธ์เป็นอย่างไร และอธิบายการทำงาน


1   function doHomework(subject, callback) {
2       alert(`Starting my ${subject} homework.`);
3       callback();
4   }
5
6   function alertFinished(){
7       alert('Finished my homework');
8   }
9
10  doHomework("INFORMATION SYSTEMS ANALYSIS AND DESIGN", () => {
11    doHomework("WEB PROGRAMMING", () => {
12      doHomework("SOFTWARE ENGINEERING", () => {
13        doHomework("ENGLISH FOR COMMUNICATION", () => {
14          doHomework("DATABASE SYSTEM CONCEPTS", alertFinished);
15        });
16      });
17    });
18  });
        

ให้นักศึกษาเปิด Console และกด Run เพื่อดูการแสดงผล