ปุ่มสำหรับเริ่มและหยุดตัวจับเวลาใน JavaScript

html<button id="start">start</button>
<button id="stop">stop</button>

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

// หยุดตัวจับเวลา:
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

javascriptlet timerId; // ทำให้ตัวแปรเป็นส่วนกลาง

start.addEventListener('click', function() {
  timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Задание 1

สมมติว่ามีตัวแปรที่เก็บตัวเลข 100 เริ่มต้น และมีปุ่มสองปุ่ม เมื่อกดปุ่มแรกให้เริ่มตัวจับเวลา ซึ่งจะลดค่าของตัวแปรลง 1 ทุกวินาที และแสดงค่าใหม่ในคอนโซล เมื่อค่าของตัวแปร ถึงศูนย์ - ให้หยุดตัวจับเวลา

เมื่อกดปุ่มที่สองให้หยุดตัวจับเวลา และให้หยุดตัวจับเวลาเช่นกัน ถ้าหากไม่กดปุ่มที่สอง แต่ค่าของตัวแปรถึงศูนย์แล้ว

Задание 2

โปรแกรมเมอร์คนหนึ่งเขียนโค้ดซึ่ง เมื่อกดปุ่มจะเริ่มตัวจับเวลา ที่แสดง เวลาปัจจุบันในคอนโซล:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

อย่างไรก็ตาม หลังจากรันโค้ดแล้ว ปรากฏว่า ปุ่มหยุดไม่ทำงาน แก้ไขข้อผิดพลาดของผู้เขียนโค้ด

Задание 3

โปรแกรมเมอร์อีกคนยังเขียนโค้ดสำหรับ แก้ไขโจทย์ก่อนหน้า:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

let timerId;

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

อย่างไรก็ตาม หลังจากรันโค้ดแล้ว ปรากฏอีกครั้งว่า ปุ่มหยุดไม่ทำงาน แก้ไขข้อผิดพลาด ของผู้เขียนโค้ด

Задание 4

โปรแกรมเมอร์อีกคนยังเขียนโค้ดสำหรับ แก้ไขโจทย์ก่อนหน้า:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
  setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

อย่างไรก็ตาม หลังจากรันโค้ดแล้ว ปรากฏอีกครั้งว่า ปุ่มหยุดไม่ทำงาน แก้ไขข้อผิดพลาด ของผู้เขียนโค้ด

Задание 5

โปรแกรมเมอร์อีกคนยังเขียนโค้ดสำหรับ แก้ไขโจทย์ก่อนหน้า:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval();
});

อย่างไรก็ตาม หลังจากรันโค้ดแล้ว ปรากฏอีกครั้งว่า ปุ่มหยุดไม่ทำงาน แก้ไขข้อผิดพลาด ของผู้เขียนโค้ด

Задание 6

โค้ดที่ผมให้ไว้ในส่วนทฤษฎี ไม่ได้คำนึงถึงว่า ปุ่มเริ่มสามารถ ถูกกดได้หลายครั้ง เพื่อแก้ไข ปัญหานี้ เมื่อกดปุ่มเริ่ม สามารถถอดการผูกเหตุการณ์ออกจากปุ่มนี้ได้ และเมื่อกดปุ่มหยุด - ให้ผูกกลับ แก้ไขปัญหานี้