Callback функц

JavaScript-д функцийг хувьсагч шиг ашиглаж болно — өөр функцид аргумент болгон дамжуулж болно. Ийнхүү дамжуулагдсан функцийг callback гэнэ. "Дараа нь дуудаарай" гэсэн утгатай — нэг ажил дууссаны дараа callback ажиллана.

Callback гэж юу вэ?

Эхлээд энгийн жишээг харцгаая. Функцийг аргумент болгон дамжуулж болно:

function мэндлэх(нэр) {
  console.log("Сайн уу, " + нэр + "!");
}

function боловсруулах(callback) {
  callback("Болд");
}

боловсруулах(мэндлэх); // Сайн уу, Болд!

мэндлэх функцийг боловсруулах-д дамжуулав — дуудах хаалт () тавиагүйг анзаарна уу. () тавьсан бол шууд дуудна, тавиагүй бол функцийн өөрийг нь дамжуулна.

Дараалсан үйлдэл

Callback-ийн хамгийн энгийн хэрэглээ бол нэг үйлдэл дууссаны дараа нөгөөг ажиллуулах явдал юм.

function татах(файл, дуусвал) {
  console.log(файл + " татаж байна...");
  // татах дуусав гэж төсөөлье
  дуусвал("Амжилттай татлаа!");
}

function хариу(мэдэгдэл) {
  console.log(мэдэгдэл);
}

татах("зураг.png", хариу);
// зураг.png татаж байна...
// Амжилттай татлаа!

Anonymous callback

Callback-ийг тусад нь нэрлэлгүй, шууд дотор нь бичиж болно. Энэ нь маш түгээмэл хэлбэр юм.

function татах(файл, дуусвал) {
  console.log(файл + " татаж байна...");
  дуусвал("Амжилттай!");
}

татах("дуу.mp3", function (мэдэгдэл) {
  console.log(мэдэгдэл);
});

Arrow функц ашиглавал улам товч болно:

татах("дуу.mp3", (мэдэгдэл) => {
  console.log(мэдэгдэл);
});

Массивын callback методууд

forEach, map, filter зэрэг массивын методууд callback авдаг — та өмнөх хичээлүүдэд эдгээрийг аль хэдийн ашигласан:

const тоонууд = [1, 2, 3, 4, 5];

тоонууд.forEach((тоо) => {
  console.log(тоо * 2);
});
// 2, 4, 6, 8, 10

forEach-д дамжуулсан (тоо) => { ... } бол callback — массивын элемент бүрд ажиллана.

setTimeout ба callback

setTimeout нь тодорхой хугацааны дараа callback ажиллуулдаг. Цаг хугацаатай холбоотой callback-ийн сонгодог жишээ:

console.log("Эхлэв");

setTimeout(() => {
  console.log("2 секундын дараа энэ гарна");
}, 2000);

console.log("Энэ шууд гарна");

// Эхлэв
// Энэ шууд гарна
// 2 секундын дараа энэ гарна

JavaScript зогсохгүйгээр дараагийн мөрийг ажиллуулдгийг анзаарна уу — setTimeout дуусахыг хүлээхгүй. Үүнийг asynchronous (async) зан гэнэ.

Callback hell

Callback дотор callback, дотор нь дахин callback бичих үед код баруун тийш эвхэгдэж, уншихад хэцүү болдог. Үүнийг callback hell гэнэ:

татах("файл1", () => {
  боловсруулах("файл1", () => {
    хадгалах("файл1", () => {
      console.log("Бүгд дууслаа");
      // Улам гүн болсоор...
    });
  });
});

Энэ асуудлыг шийдэхийн тулд Promise гарч ирсэн. Дараагийн хичээлд яг үүнийг үзнэ.

Дараагийн хичээлд:

Promise — callback hell-ийн оронд цэвэр, уншигдахад хялбар async код бичих арга. Орчин үеийн JavaScript-ийн суурь ойлголтуудын нэг юм.