jQuery Academy · บทเรียน

การจัดการเหตุการณ์และการจำกัดความถี่อย่างมีประสิทธิภาพ

การจัดการเหตุการณ์และการจำกัดความถี่อย่างมีประสิทธิภาพ เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุการณ์มากเกินไป: ปัญหาด้านประสิทธิภาพ

เมื่อสร้างเว็บแอปพลิเคชันแบบโต้ตอบ เรามักอาศัยเหตุการณ์ต่าง ๆ เช่น การเลื่อน การปรับขนาด หรือการพิมพ์ เหตุการณ์เหล่านี้จะเรียกใช้ฟังก์ชันเพื่ออัปเดตส่วนติดต่อผู้ใช้หรือดำเนินการคำนวณ

อย่างไรก็ตาม หากเหตุการณ์เหล่านี้เกิดขึ้นถี่เกินไป อาจทำให้ประสิทธิภาพการทำงานติดขัด ประสบการณ์ใช้งานไม่ราบรื่น และอาจทำให้เบราว์เซอร์หยุดทำงานได้ นี่จึงเป็นเหตุผลที่เทคนิคการเพิ่มประสิทธิภาพมีความสำคัญ

ปัญหา: เหตุการณ์เกิดขึ้นอย่างรวดเร็ว

มาดูกันว่าเหตุการณ์ทั่วไปอย่าง scroll สามารถเกิดขึ้นถี่เพียงใดเมื่อไม่มีการเพิ่มประสิทธิภาพ เปิดคอนโซลหรือสังเกตตัวนับขณะที่คุณเลื่อน

สังเกตว่าจำนวนเพิ่มขึ้นรวดเร็วเพียงใด ซึ่งแสดงว่ามีการเรียกใช้ฟังก์ชันจำนวนมากในช่วงเวลาสั้น ๆ วิธีนี้อาจไม่มีประสิทธิภาพอย่างมาก

<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Scroll Count: 0</div>
  <p>Scroll down to see the event fire rapidly.</p>
  <script>
    $(document).ready(function() {
      let count = 0;
      $(window).on('scroll', function() {
        count++;
        $('#status').text('Scroll Count: ' + count);
      });
    });
  </script>
</body>
</html>

เริ่มต้นทำความรู้จักการจำกัดความถี่

การจำกัดความถี่ คือเทคนิคที่จำกัดความถี่ในการเรียกใช้ฟังก์ชันในช่วงเวลาหนึ่ง โดยรับประกันว่าฟังก์ชันจะทำงานไม่เกินหนึ่งครั้งภายในช่วงเวลาที่กำหนด

ลองนึกภาพว่าเป็นประตูที่เปิดทุก ๆ 200 มิลลิวินาทีเท่านั้น ไม่ว่าคุณจะพยายามผ่านกี่ครั้ง คุณก็จะผ่านได้เฉพาะตอนที่ประตูเปิด

การจำกัดความถี่ในการทำงานจริง

นี่คือตัวช่วยจำกัดความถี่อย่างง่าย ซึ่งรับประกันว่าตัวจัดการการเลื่อนจะทำงานไม่เกินหนึ่งครั้งทุก 200 มิลลิวินาที วิธีนี้ช่วยลดจำนวนการเรียกใช้ระหว่างการเลื่อนต่อเนื่องได้อย่างมาก

ลองเปรียบเทียบกับตัวอย่างก่อนหน้า จำนวนจะอัปเดตอย่างราบรื่นแต่ไม่ถี่เท่าเดิม จึงช่วยประหยัดทรัพยากร

<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Throttled Scroll Count: 0</div>
  <p>Scroll down. The count updates less frequently.</p>
  <script>
    // A simple throttling utility function
    function throttle(func, delay) {
      let canRun = true;
      return function(...args) {
        if (canRun) {
          func.apply(this, args);
          canRun = false;
          setTimeout(() => canRun = true, delay);
        }
      };
    }

    $(document).ready(function() {
      let count = 0;
      const throttledScroll = throttle(function() {
        count++;
        $('#status').text('Throttled Scroll Count: ' + count);
      }, 200); // Update at most every 200ms

      $(window).on('scroll', throttledScroll);
    });
  </script>
</body>
</html>

เริ่มต้นทำความรู้จักการหน่วงการเรียกใช้

การหน่วงการเรียกใช้ เป็นอีกเทคนิคหนึ่งที่เลื่อนการทำงานของฟังก์ชันออกไปจนกว่าจะผ่านช่วงเวลาที่กำหนดนับจากครั้งล่าสุดที่มีการเรียกเหตุการณ์

ลองนึกภาพไฟที่ดับลงก็ต่อเมื่อคุณหยุดเคลื่อนไหวเป็นเวลา 1 วินาที หากคุณยังเคลื่อนไหว ตัวจับเวลาจะเริ่มนับใหม่ ฟังก์ชันจะทำงานก็ต่อเมื่อผู้ใช้หยุดการกระทำตามระยะเวลาหน่วงที่กำหนดแล้ว

การหน่วงการเรียกใช้ในการทำงานจริง

ในที่นี้ เราใช้การหน่วงการเรียกใช้กับเหตุการณ์ keyup ของช่องรับข้อความ สถานะจะอัปเดตหลังจากคุณหยุดพิมพ์เป็นเวลา 500 มิลลิวินาทีเท่านั้น

วิธีนี้เหมาะอย่างยิ่งสำหรับช่องค้นหา ซึ่งควรส่งคำค้นหาเพียงครั้งเดียวหลังจากผู้ใช้พิมพ์คำค้นหาเสร็จแล้ว

<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { font-family: sans-serif; margin: 0; padding: 20px; }
  input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
  #status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
  <p>Type into the box. The status updates only after you pause.</p>
  <input type="text" id="myInput" placeholder="Start typing...">
  <div id="status">Last typed: (none)</div>
  <script>
    // A simple debouncing utility function
    function debounce(func, delay) {
      let timeoutId;
      return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      };
    }

    $(document).ready(function() {
      const debouncedLog = debounce(function(event) {
        $('#status').text('Last typed: ' + $(event.target).val());
      }, 500); // Wait 500ms after typing stops

      $('#myInput').on('keyup', debouncedLog);
    });
  </script>
</body>
</html>

การจำกัดความถี่กับการหน่วงการเรียกใช้: ความแตกต่างสำคัญ

แม้ทั้งสองวิธีจะช่วยเพิ่มประสิทธิภาพการจัดการเหตุการณ์ แต่มีจุดประสงค์แตกต่างกัน:

การจำกัดความถี่: รับประกันว่าฟังก์ชันจะทำงานเป็นระยะ ๆ เมื่อเวลาผ่านไป แม้เหตุการณ์จะเกิดขึ้นอย่างรวดเร็ว วิธีนี้มุ่งควบคุมอัตราการทำงาน
การหน่วงการเรียกใช้: รับประกันว่าฟังก์ชันจะทำงานหลังจากไม่มีการเคลื่อนไหวไประยะหนึ่งเท่านั้น วิธีนี้มุ่งรอให้ผู้ใช้ดำเนินการจนเสร็จ

การเลือกเทคนิคที่เหมาะสมขึ้นอยู่กับกรณีการใช้งานเฉพาะของคุณ

กรณีการใช้งานจริง

ต่อไปนี้คือตัวอย่างสถานการณ์ทั่วไปของแต่ละวิธี:

การจำกัดความถี่:
- การปรับขนาดหน้าต่าง
- การเลื่อนหน้า
- การลากและวาง
- การอัปเดตเกม (เช่น การยิงอาวุธ)
การหน่วงการเรียกใช้:
- การป้อนข้อมูลในแถบค้นหา (เติมข้อความอัตโนมัติ)
- การตรวจสอบแบบฟอร์มหลังผู้ใช้ป้อนข้อมูล
- การบันทึกเนื้อหาในเครื่องมือแก้ไขข้อความ
- การเรียกใช้ API หลังผู้ใช้หยุดพิมพ์

การผสานรวมกับเหตุการณ์ของ jQuery

คุณสามารถผสานรวมฟังก์ชันตัวช่วยเหล่านี้กับเมธอดเหตุการณ์ของ jQuery เช่น .on() หรือ .bind() ได้อย่างง่ายดาย เพียงส่งฟังก์ชันที่จำกัดความถี่หรือหน่วงการเรียกใช้ของคุณไปเป็นตัวจัดการเหตุการณ์

$(window).on('resize', throttle(myResizeHandler, 250));

$('#search-input').on('keyup', debounce(searchFunction, 300));

วิธีนี้ช่วยให้ตัวรับฟังเหตุการณ์มีประสิทธิภาพและแอปพลิเคชันตอบสนองได้ดี

ประโยชน์ด้านประสิทธิภาพ

เมื่อใช้การจำกัดความถี่และการหน่วงการเรียกใช้ คุณจะได้รับประโยชน์ด้านประสิทธิภาพหลายประการ:

ใช้ CPU ลดลง: การเรียกใช้ฟังก์ชันน้อยลงหมายถึงเบราว์เซอร์ทำงานน้อยลง
ส่วนติดต่อผู้ใช้ราบรื่นขึ้น: ช่วยป้องกันภาพเคลื่อนไหวกระตุกหรือส่วนติดต่อที่ไม่ตอบสนอง
ประสบการณ์ผู้ใช้ดีขึ้น: ผู้ใช้จะรู้สึกว่าแอปพลิเคชันทำงานเร็วและลื่นไหลขึ้น
การเรียกใช้ API มีประสิทธิภาพขึ้น: ช่วยหลีกเลี่ยงการส่งคำขอที่ไม่จำเป็นจำนวนมากไปยังระบบเบื้องหลัง

ตรวจสอบความเข้าใจอย่างรวดเร็วเรื่องการเพิ่มประสิทธิภาพเหตุการณ์

สถานการณ์ใดต่อไปนี้เหมาะที่สุดที่จะจัดการด้วยการหน่วงการเรียกใช้?

ทบทวนและขั้นตอนถัดไป

ทำได้ดีมาก! คุณได้เรียนรู้เทคนิคทรงพลังสองอย่างสำหรับเพิ่มประสิทธิภาพการจัดการเหตุการณ์:

การจำกัดความถี่: จำกัดอัตราการเรียกใช้ฟังก์ชัน
การหน่วงการเรียกใช้: เลื่อนการทำงานของฟังก์ชันออกไปจนกว่าจะไม่มีการเคลื่อนไหวระยะหนึ่ง

การใช้เทคนิคเหล่านี้อย่างชำนาญจะช่วยปรับปรุงประสิทธิภาพและการตอบสนองของแอปพลิเคชัน jQuery ได้อย่างมาก ลองใช้ระยะเวลาหน่วงที่แตกต่างกันเพื่อหาค่าที่เหมาะสมที่สุดสำหรับความต้องการเฉพาะของคุณ

คำถามที่พบบ่อย

บทเรียน “การจัดการเหตุการณ์และการจำกัดความถี่อย่างมีประสิทธิภาพ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการเหตุการณ์และการจำกัดความถี่อย่างมีประสิทธิภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการเหตุการณ์และการจำกัดความถี่อย่างมีประสิทธิภาพ”

นำการจำกัดความถี่และการหน่วงการเรียกเหตุการณ์มาใช้กับเหตุการณ์ที่เกิดขึ้นบ่อย เช่น การปรับขนาดหรือการเลื่อน เพื่อป้องกันการเรียกฟังก์ชันมากเกินไปและเพิ่มการตอบสนอง คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “การจัดการเหตุการณ์และการจำกัดความถี่อย่างมีประสิทธิภาพ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การปรับปรุงประสิทธิภาพการดำเนินการกับ DOM
การจัดการเหตุการณ์และการจำกัดความถี่อย่างมีประสิทธิภาพ
การใช้ประโยชน์จากแคชและออบเจ็กต์ Deferred

← กลับไปที่ jQuery Academy