การแยกฟังก์ชันนิรนามใน JavaScript

ตอนนี้ให้ฟังก์ชันนิรนามผูกไว้กับย่อหน้าของเรา:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

สมมติว่าเราต้องการแยกฟังก์ชันนี้ออกจากย่อหน้า หลังจากคลิกที่ย่อหน้านี้ อย่างไรก็ตาม เราจะพบปัญหา: ฟังก์ชันไม่มีชื่อ ซึ่งหมายความว่า เราจะไม่สามารถอ้างอิงถึงฟังก์ชันด้วยชื่อนั้นได้ เพื่อแยกมันออก

เพื่อแก้ไขปัญหา จำเป็นต้องตั้งชื่อให้ฟังก์ชัน ทำให้มันเป็น นิพจน์ฟังก์ชันที่มีชื่อ มาทำกัน:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() { // ตั้งชื่อให้ฟังก์ชัน
		console.log(this.textContent);
	});
}

ตอนนี้ฟังก์ชันนี้สามารถถูกแยกออกได้ภายใน ตัวมันเอง:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		console.log(this.textContent);
		this.removeEventListener('click', func); // แยกฟังก์ชันออก
	});
}

กำหนดรายการ ul ซึ่งในแต่ละรายการ มีตัวเลขบันทึกไว้ ทำให้เมื่อ คลิกที่ li ใด ๆ ตัวเลขของมันจะเพิ่มขึ้น ทีละหนึ่ง

ปรับเปลี่ยนงานก่อนหน้า เพื่อให้แต่ละ li เพิ่มค่า ของตัวเองเฉพาะเมื่อกดครั้งแรก บนมันเท่านั้น

ปรับเปลี่ยนงานก่อนหน้า เพื่อให้แต่ละ li เพิ่มค่า ของตัวเองเฉพาะเมื่อค่า ของมันน้อยกว่า 10