Bagaimana untuk melaksanakan panggilan balik tak segerak JavaScript

JavaScript ialah bahasa satu utas, iaitu, ia hanya boleh melaksanakan satu tugas pada satu masa. Ini bermakna dalam sesetengah kes, jika kami memanggil fungsi secara langsung dalam JavaScript yang mungkin mengambil masa yang lama, halaman tersebut akan membeku dan menjadi tidak bertindak balas. Untuk menyelesaikan masalah ini, kami perlu menggunakan panggilan balik tak segerak untuk membenarkan JavaScript meneruskan pemprosesan transaksi lain sambil melaksanakan tugas jangka panjang.

Di sini, kami akan memperkenalkan cara menggunakan panggilan balik tak segerak JavaScript dan cara menggunakan panggilan balik untuk mengoptimumkan prestasi JavaScript.

1. Apakah panggilan balik tak segerak?

Panggil balik tak segerak merujuk kepada menghantar fungsi lain sebagai parameter kepada fungsi yang melaksanakan tugas apabila melaksanakan tugas. Fungsi ini akan dipanggil apabila tugas pelaksanaan selesai supaya ia boleh menerima keputusan yang dikembalikan oleh tugas pelaksanaan. Pendekatan ini meningkatkan prestasi dengan membenarkan JavaScript meneruskan pemprosesan tugasan lain semasa ia sedang dilaksanakan.

Sebagai contoh, kita boleh menggunakan panggilan balik tak segerak untuk mendapatkan data borang yang diserahkan oleh pengguna di tapak web:

function submitForm(form, callback) {
  // 验证表单数据、生成提交数据等操作
  var formData = generateFormData(form);

  // 发送Ajax请求
  sendRequest('POST', '/submit', formData, function(response) {
    callback(response);
  });
}

Dalam contoh di atas, fungsi submitForm() menerima parameter form dan callbackFungsi sebagai parameter. Apabila operasi selesai, fungsi callback akan dipanggil supaya ia boleh menerima keputusan yang dikembalikan daripada menjalankan operasi. Ini bermakna kita boleh melaksanakan tugas lain apabila borang diserahkan dan tidak memanggil fungsi panggil balik untuk mengendalikan keputusan sehingga operasi selesai dan keputusan dikembalikan.

2. Bagaimana untuk menggunakan panggilan balik tak segerak?

Dalam JavaScript, terdapat pelbagai cara untuk menggunakan panggilan balik tak segerak. Berikut ialah beberapa kaedah biasa:

2.1. Objek Tertunda jQuery

jQuery menyediakan cara mudah untuk mengurus tugas tak segerak dan fungsi panggil baliknya: Objek tertunda.

Objek tertunda ialah objek dengan banyak kaedah (seperti done() dan fail()) yang membolehkan kami mentakrifkan fungsi panggil balik untuk tugas tak segerak. Apabila tugas tak segerak selesai, kita boleh menggunakan kaedah resolve() untuk memanggil fungsi panggil balik penyelesaian, atau kaedah reject() untuk memanggil fungsi panggil balik kegagalan.

Sebagai contoh, kod berikut menggunakan objek jQuery Deferred untuk memuatkan imej:

function loadImage(url) {
  var defer = $.Deferred();
  var img = new Image();

  img.onload = function() {
    defer.resolve(img);
  };

  img.onerror = function() {
    defer.reject('Failed to load image at ' + url);
  };

  img.src = url;

  return defer.promise();
}

loadImage('http://example.com/image.jpg')
  .done(function(img) {
    console.log('Image loaded.', img);
  })
  .fail(function(error) {
    console.error(error);
  });

Dalam kod di atas, fungsi loadImage() mengembalikan hasil operasi tak segerak melalui objek Tertunda. Apabila operasi selesai, jika berjaya, kami menggunakan kaedah defer.resolve() untuk memanggil fungsi panggil balik selesai done(), jika tidak, kami menggunakan kaedah defer.reject() untuk memanggil fungsi panggil balik kegagalan fail().

2.2. Objek Promise

Objek Promise ialah konsep yang baru dicadangkan dalam ES6, yang membolehkan kami memproses status penyelesaian tugas tak segerak. Kita boleh merangkum tugas tak segerak dalam objek Promise dan menggunakan kaedah then() untuk mentakrifkan fungsi panggil balik kejayaan dan kegagalan.

Sebagai contoh, kod berikut menggunakan objek Promise untuk memuatkan imej:

function loadImage(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image();

    img.onload = function() {
      resolve(img);
    };

    img.onerror = function() {
      reject('Failed to load image at ' + url);
    };

    img.src = url;
  });
}

loadImage('http://example.com/image.jpg')
  .then(function(img) {
    console.log('Image loaded.', img);
  })
  .catch(function(error) {
    console.error(error);
  });

Dalam kod di atas, fungsi loadImage() mengembalikan objek Promise dan apabila operasi tak segerak selesai, kami gunakan resolve() Kaedah memanggil fungsi panggil balik kejayaan then(), jika tidak, kami menggunakan kaedah reject() untuk memanggil fungsi panggil balik kegagalan catch().

3. Bagaimana untuk mengoptimumkan kod?

Semasa menggunakan panggilan balik tak segerak boleh meningkatkan prestasi JavaScript, jika digunakan secara salah, ia boleh menyebabkan kod bersepah dan mengurangkan kebolehbacaan. Berikut ialah beberapa amalan terbaik untuk diikuti apabila menggunakan panggilan balik tak segerak:

3.1 Elakkan sarang panggilan balik yang berlebihan

Apabila kita menggunakan berbilang panggilan balik tak segerak, kita boleh menghadapi masalah dalam neraka panggil balik. Untuk mengelakkan masalah ini, kita boleh menggunakan objek Promise atau sintaks async/menunggu untuk mengelakkan berbilang peringkat sarang.

Sebagai contoh, kod berikut menggunakan async/menunggu untuk memuatkan imej:

async function loadImage(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image();

    img.onload = function() {
      resolve(img);
    };

    img.onerror = function() {
      reject('Failed to load image at ' + url);
    };

    img.src = url;
  });
}

async function main() {
  try {
    var img = await loadImage('http://example.com/image.jpg');
    console.log('Image loaded.', img);
  } catch (error) {
    console.error(error);
  }
}

main();

Dalam kod di atas, kami mengisytiharkan fungsi async/await dan fungsi loadImage() menggunakan main() sintaks. Menggunakan kata kunci await, kami menunggu operasi tak segerak selesai dan menggunakan hasil yang dikembalikan setelah operasi selesai.

3.2. Elakkan panggilan balik neraka

Jika kami perlu menghantar parameter antara berbilang tugas tak segerak dan mengelakkan sarang panggilan balik, kami boleh menggunakan Janji JavaScript dan sintaks async/menunggu untuk mengelakkan panggilan balik neraka. Kod berikut menunjukkan pendekatan ini:

async function multiply(x, y) {
  return x * y;
}

async function square(n) {
  return multiply(n, n);
}

async function cube(n) {
  var squareResult = await square(n);

  return multiply(squareResult, n);
}

async function main() {
  try {
    var result = await cube(3);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

Dalam kod di atas, kami mengisytiharkan fungsi async/await, multiply() dan square() menggunakan cube(). Kami menggunakan kata kunci await untuk menghantar parameter antara fungsi.

4. Ringkasan

Panggil balik tak segerak ialah konsep pengaturcaraan penting dalam JavaScript. Ia meningkatkan prestasi JavaScript dengan membenarkan kami meneruskan tugasan lain sambil melakukan operasi yang panjang. Menggunakan sintaks Promise dan async/wait boleh membantu kami mengelakkan panggilan balik neraka dan meningkatkan kebolehbacaan kod.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan panggilan balik tak segerak JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!