ฟังก์ชั่นการโทรกลับคืออะไร? ฉันไม่รู้วิธีใช้และใช้งานฟังก์ชั่นการโทรกลับ JS ก่อนเรียนรู้ ในบทความต่อไปนี้ฉันจะแนะนำตัวอย่างของฟังก์ชั่นการโทรกลับของฉันให้กับนักเรียน นักเรียนที่จำเป็นต้องรู้ไม่ควรระวังไม่ให้ป้อนข้อมูลอ้างอิง
หลักการฟังก์ชั่นการโทรกลับ:
ฉันจะจากไปแล้วฉันจะแจ้งให้คุณทราบ "
นี่เป็นกระบวนการแบบอะซิงโครนัส ในระหว่างกระบวนการของ "ฉันจะไป" (การดำเนินการฟังก์ชั่น), "คุณ" สามารถทำอะไรก็ได้ "มาถึง" (การดำเนินการฟังก์ชั่นเสร็จสมบูรณ์) และ "แจ้งให้คุณทราบ" (โทรกลับ) หลังจากกระบวนการ "แจ้งให้คุณทราบ" (โทรกลับ)
ตัวอย่าง
1. วิธีพื้นฐาน
<script language = "javascript" type = "text/javascript"> ฟังก์ชั่น dosomething (โทรกลับ) {// … // เรียก callbackcallback ('สิ่ง', 'Goes', 'ที่นี่');} foom (a, b, c) {// </script>หรือใช้ฟังก์ชันที่ไม่ระบุชื่อ
<script language = "javascript" type = "text/javascript"> ฟังก์ชั่น dosomething (damsg, callback) {Alert (damsg); if (typeof callback == "function") callback (); } dosomething ("ฟังก์ชั่นการโทรกลับ", function () {Alert ("เหมือนกับ jQuery callbacks แบบฟอร์ม!");}); </script>2. วิธีการขั้นสูง
วิธีการโทรโดยใช้ JavaScript
<script language = "javascript" type = "text/javascript"> ฟังก์ชั่น (ชื่อ) {this.name = name;} thing.prototype.dosomething = ฟังก์ชั่น (callback) {// เรียกการเรียกกลับของเรา แต่ใช้อินสแตนซ์ของเราเอง สิ่ง ('Joe'); T.Dosomething (foo); // แจ้งเตือน "Joe" ผ่าน `foo` </script>ผ่านพารามิเตอร์
<script language = "javascript" type = "text/javascript"> ฟังก์ชั่น (ชื่อ) {this.name = name;} thing.prototype.dosomething = ฟังก์ชั่น (การเรียกกลับ, คำทักทาย) {// เรียกการเรียกกลับของเรา แต่ใช้อินสแตนซ์ของเราเอง = สิ่งใหม่ ('Joe'); t.dosomething (foo, 'hi'); // แจ้งเตือน "สวัสดี Joe" ผ่าน `foo` </script>พารามิเตอร์ผ่านโดยใช้ JavaScript
<script language = "javascript" type = "text/javascript"> ฟังก์ชั่น (ชื่อ) {this.name = name;} thing.prototype.dosomething = ฟังก์ชั่น (การเรียกกลับ) {// เรียกการเรียกกลับของเรา แต่ใช้อินสแตนซ์ของเราเอง " + this.name +" " + สาม +" " + สอง +" " + หนึ่ง);} var t = สิ่งใหม่ ('Joe'); t.dosomething (foo); // แจ้งเตือน "สวัสดี Joe 3 2 1" ผ่าน `foo` </script>ตัวอย่าง
// หากแหล่งข้อมูลที่ให้ไว้เป็นจำนวนเต็มซึ่งเป็นคะแนนของนักเรียนเมื่อ NUM <= 0 จะถูกประมวลผลโดยชั้นพื้นฐานและเมื่อ N> 0 จะถูกประมวลผลโดยชั้นบน
// คัดลอกฟังก์ชั่นต่อไปนี้และบันทึกเป็น 1.js
ฟังก์ชั่น f (num, callback) {ถ้า (num <0) {alert ("เรียกฟังก์ชันระดับต่ำเพื่อประมวลผล!"); การแจ้งเตือน ("คะแนนไม่สามารถลบได้ข้อผิดพลาดอินพุต!"); } อื่นถ้า (num == 0) {แจ้งเตือน ("เรียกฟังก์ชันระดับต่ำเพื่อประมวลผล!"); การแจ้งเตือน ("นักเรียนอาจไม่ได้สอบ!"); } else {Alert ("เรียกฟังก์ชันระดับสูงเพื่อประมวลผล!"); การโทรกลับ (); -// บันทึกไฟล์ test.html ต่อไปนี้ในไดเรกทอรีเดียวกับ 1.js:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> charset = gb2312 "> <script src =" 1.js "type =" text/javaScript "> </script> <title> เอกสารชื่อ UNT ชื่อ </title> <script type =" text/javascript "> ฟังก์ชันทดสอบ () {var p = document.getElementById (" pp "); pp.innerText = ""; var num = document.getElementById ("คะแนน") ค่า; f (num, function () {// ฟังก์ชั่นการประมวลผลระดับสูงที่ไม่ระบุชื่อถ้า (NUM <60) Alert ("ล้มเหลว!"); อื่นถ้า (num <= 90) แจ้งเตือน ("ผลลัพธ์ที่ยอดเยี่ยม!"); การแจ้งเตือนอื่น ๆ ("ผลลัพธ์ที่ยอดเยี่ยม!");}) pp.innerText = " } </script> </head> <body> <p> ฟังก์ชั่นการโทรกลับตัวอย่าง: เมื่อคะแนนนักเรียน <= 0 คะแนนชั้นล่างจะจัดการได้ เมื่อคะแนน> 0 ชั้นบนสุดจะจัดการได้ </p> โปรดป้อนคะแนนนักเรียน <อินพุต type = "text" id = "คะแนน"> <อินพุต type = "ปุ่ม" onclick = "test ()" value = "ตรวจสอบผลลัพธ์"> <p id = "pp"> </p> </body> </html>ต่อไปนี้เป็นส่วนเพิ่มเติมจากชาวเน็ตอื่น ๆ :
โหมดการโทรกลับใน JavaScript:
ดังที่แสดงใน:
ฟังก์ชั่น writeCode (การโทรกลับ) {// ดำเนินการบางอย่าง, callback (); // ... } ฟังก์ชั่น intrduceBugs () {//exintroduce ช่องโหว่} writeCode (intrduceBugs);เราผ่านแอปพลิเคชันของฟังก์ชั่นไปยัง writeCode () เพื่อให้ writeCode ดำเนินการในเวลาที่เหมาะสม (กลับไปเรียกมันในภายหลัง)
ก่อนอื่นให้ดูตัวอย่างที่ไม่ดี (จะได้รับการปรับปรุงใหม่ในภายหลัง):
// จำลองโหนด DOM ในหน้าการค้นหาและส่งคืนโหนดที่พบในอาร์เรย์อย่างสม่ำเสมอ // ฟังก์ชั่นนี้ใช้เพื่อค้นหาการประมวลผลแบบลอจิคัลสำหรับโหนด DOM var findNodes = function () {var i = 100000; // จำนวนลูปจำนวนมาก ในขณะที่ (i) {i -= 1; Nodes.push (พบ); } ส่งคืนโหนด; } // ซ่อนโหนด DOM ทั้งหมดที่พบ var hide = function (โหนด) {var i = 0, max = nodes.length; สำหรับ (; i <max; i ++) {// มีวงเล็บหลังจาก FindingNodes เพื่อระบุการดำเนินการทันที ก่อนอื่นดำเนินการ findNodes () จากนั้นดำเนินการซ่อน () <ซ่อน (findNodes ()); ฟังก์ชั่นดำเนินการ}; โหนด [i] .style.display = "ไม่มี"} วิธีข้างต้นไม่มีประสิทธิภาพ มันเป็นความคิดที่ว่าซ่อน () จะต้องสำรวจโหนดอาร์เรย์ที่ส่งคืนโดย findNodes () อีกครั้ง วิธีหลีกเลี่ยงลูปที่ไม่จำเป็นเช่นนี้ เราไม่สามารถซ่อนโหนดการสืบค้นโดยตรงใน FindNodes (การค้นหานี้สามารถแก้ไขการมีเพศสัมพันธ์แบบลอจิคัล) ดังนั้นจึงไม่ใช่ฟังก์ชั่นทั่วไปอีกต่อไป วิธีแก้ปัญหาคือการใช้โหมดการโทรกลับซึ่งคุณสามารถผ่านตรรกะที่ซ่อนอยู่ของโหนดไปยัง FindNodes () ในฟังก์ชั่นการโทรกลับและมอบหมายให้เรียกใช้งาน // Refactor findNodes เพื่อรับฟังก์ชั่นการเรียกกลับ var findNodes = fucntion // ตรวจสอบว่าฟังก์ชั่นการโทรกลับพร้อมใช้งานสำหรับการโทรกลับหรือไม่หาก (typeof callback! == 'function') {callback = false; } ในขณะที่ (i) {i -= 1; ถ้า (โทรกลับ) {โทรกลับ (พบ); } nodes.push (พบ); } ส่งคืนโหนด; } // CheckBack function var hide = function (node) {node.style.display = 'none'; } // ค้นหาโหนดที่ตามมาและซ่อนไว้ใน FindNodes (ซ่อน); // ดำเนินการ findnodes ก่อนแล้วซ่อน แน่นอนฟังก์ชั่นการเรียกกลับสามารถสร้างขึ้นได้เมื่อเรียกใช้ฟังก์ชันหลัก: findNodes (ฟังก์ชั่น (โหนด) {node.style.display = 'ไม่มี';});