0Pricing
JavaScript Academy · บทเรียน

รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น

ลองทำงาน async ที่ล้มเหลวใหม่สองสามครั้งโดยเว้นช่วง เพิ่มการหน่วงเวลาแบบทวีคูณและความคลาดเคลื่อนเล็กน้อย แล้วหยุดเมื่อถึงจำนวนสูงสุดที่กำหนด

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

เหตุใดจึงลองใหม่

เป้าหมาย: เพิ่มการลองใหม่เล็กน้อยอย่างควบคุมได้

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

ตัวช่วยหน่วงเวลา

คุณต้องมีตัวช่วย หน่วงเวลา ขนาดเล็กเพื่อหยุดรอระหว่างการลองแต่ละครั้ง

// delay: resolve after ms
function delay(ms) {
  return new Promise(function (resolve) {
    setTimeout(function () { resolve(); }, ms);
  });
}

async function demoDelay() {
  console.log("wait...");
  await delay(5);
  console.log("done");
}

demoDelay();
รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น — ภาพประกอบ 2

จำลองงานที่ไม่เสถียร

งานจำลองนี้ช่วยให้เราฝึกการลองใหม่ได้โดยไม่ต้องเรียกเครือข่ายจริง

// Unstable task: fails first N times, then succeeds
function makeUnstable(failCount, value) {
  let left = failCount;
  return async function run() {
    if (left > 0) {
      left = left - 1;
      throw new Error("temporary");
    }
    return value;
  };
}

const sometimes = makeUnstable(2, "OK");
sometimes().catch(function (e) { console.log("first:", e.message); });
รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น — ภาพประกอบ 3

ลูปลองใหม่แบบคงที่

ช่วงเวลาคงที่: รอเป็นเวลาเท่ากันระหว่างการลองแต่ละครั้ง และหยุดหลังจากลองครบจำนวนครั้งสูงสุด

// Retry a few times with a fixed wait
async function retryFixed(fn, tries, waitMs) {
  let lastError = null;
  for (let i = 1; i <= tries; i++) {
    try {
      return await fn();
    } catch (e) {
      lastError = e;
      console.log("attempt", i, "failed:", e.message);
      if (i < tries) {
        await delay(waitMs);
      }
    }
  }
  throw lastError;
}

(async function () {
  const job = makeUnstable(2, "OK");
  const result = await retryFixed(job, 3, 5);
  console.log("fixed result:", result);
})();
รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น — ภาพประกอบ 4

การเพิ่มเวลารอแบบทวีคูณ

การเพิ่มเวลารอ: เพิ่มเวลารอในแต่ละครั้ง และเพิ่ม ความผันผวน เล็กน้อยเพื่อหลีกเลี่ยงการพุ่งสูงเป็นช่วง ๆ

// Exponential backoff with a tiny jitter
function jitter(ms) {
  const wiggle = Math.floor(Math.random() * 3); // 0..2
  return ms + wiggle;
}

async function retryBackoff(fn, tries, baseMs) {
  let lastError = null;
  for (let i = 1; i <= tries; i++) {
    try {
      return await fn();
    } catch (e) {
      lastError = e;
      console.log("attempt", i, "failed:", e.message);
      if (i < tries) {
        const wait = jitter(baseMs * Math.pow(2, i - 1));
        await delay(wait);
      }
    }
  }
  throw lastError;
}

(async function () {
  const job = makeUnstable(2, "OK");
  const value = await retryBackoff(job, 4, 3);
  console.log("backoff result:", value);
})();
รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น — ภาพประกอบ 5

เคล็ดลับการลองใหม่

เคล็ดลับ:

  • ลองใหม่เฉพาะ ข้อผิดพลาดชั่วคราว เช่น การหมดเวลาและข้อจำกัดอัตรา
  • อย่าลองใหม่เมื่อข้อมูลนำเข้าไม่ถูกต้อง
  • จำกัดจำนวนครั้งให้เล็ก (3–5 ครั้ง) และใช้ log บันทึกความล้มเหลวสั้น ๆ
รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น — ภาพประกอบ 6

แบบทดสอบการลองใหม่และการเพิ่มเวลารอ

ตรวจสอบอย่างรวดเร็ว: พื้นฐานการเพิ่มเวลารอ

รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น — ภาพประกอบ 7

ทบทวน

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

รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น — ภาพประกอบ 8

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

บทเรียน “รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น”

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

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

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

บทเรียน “รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การเขียนฟังก์ชัน async; try/catch; แบบขนานกับแบบลำดับ
  2. Timeout และการยกเลิกด้วย AbortController
  3. รูปแบบการลองใหม่และการหน่วงเวลาเพิ่มขึ้น
← กลับไปที่ JavaScript Academy