การโหลดรูปภาพผ่าน callback แบบ asynchronous ใน JavaScript

มาลองเขียนฟังก์ชัน loadImage ซึ่งจะทำหน้าที่โหลดรูปภาพ โดยให้พารามิเตอร์แรกของฟังก์ชันนี้รับเส้นทางไปยังไฟล์รูปภาพ และพารามิเตอร์ที่สอง - เป็น callback ที่จะทำงานเมื่อ รูปภาพโหลดเสร็จ:

javascriptloadImage('img.png', function() {
  // จะทำงานเมื่อรูปภาพโหลดเสร็จ
});

ให้พารามิเตอร์แรกของ callback ของเราได้รับ ลิงก์ไปยัง DOM element ของรูปภาพ และพารามิเตอร์ที่สอง - ข้อผิดพลาด หากเกิดสถานการณ์ข้อยกเว้น:

javascriptloadImage('img.png', function(image, err) {
  console.log(image, err);
});

เราสามารถใช้ฟังก์ชันของเราได้ดัง ต่อไปนี้:

javascriptloadImage('image.png', function(image, err) {
  document.body.append(image); // จะวางรูปภาพเมื่อโหลดเสร็จ
});

หรือพร้อมกับการจัดการสถานการณ์ข้อยกเว้น:

javascriptloadImage('image.png', function(image, err) {
  if (!err) {
    document.body.append(image);
  } else {
    console.log('เกิดข้อผิดพลาด: ' + err);
  }
});