JavaScript là đồng bộ hay không đồng bộ?

Hãy xem xét đoạn mã sau

const name = 'Miriam';
const greeting = `Hello, my name is ${name}!`;
console.log(greeting);
// "Hello, my name is Miriam!"

mã này

1. Khai báo một chuỗi có tên là

   function makeGreeting(name) {
     return `Hello, my name is ${name}!`;
   }
   
   const name = 'Miriam';
   const greeting = makeGreeting(name);
   console.log(greeting);
   // "Hello, my name is Miriam!"
   

   5
2. Khai báo một chuỗi khác có tên là

   function makeGreeting(name) {
     return `Hello, my name is ${name}!`;
   }
   
   const name = 'Miriam';
   const greeting = makeGreeting(name);
   console.log(greeting);
   // "Hello, my name is Miriam!"
   

   6, sử dụng

   function makeGreeting(name) {
     return `Hello, my name is ${name}!`;
   }
   
   const name = 'Miriam';
   const greeting = makeGreeting(name);
   console.log(greeting);
   // "Hello, my name is Miriam!"
   

   5
3. Xuất lời chào ra bảng điều khiển JavaScript

Chúng ta nên lưu ý ở đây rằng trình duyệt duyệt từng dòng một của chương trình một cách hiệu quả, theo thứ tự chúng ta đã viết nó. Tại mỗi điểm, trình duyệt đợi dòng hoàn thành công việc của nó trước khi chuyển sang dòng tiếp theo. Nó phải làm điều này bởi vì mỗi dòng phụ thuộc vào công việc được thực hiện trong các dòng trước

Điều đó làm cho chương trình này trở thành một chương trình đồng bộ. Nó vẫn sẽ đồng bộ ngay cả khi chúng ta gọi một chức năng riêng biệt, như thế này

function makeGreeting(name) {
  return `Hello, my name is ${name}!`;
}

const name = 'Miriam';
const greeting = makeGreeting(name);
console.log(greeting);
// "Hello, my name is Miriam!"

Ở đây,

function makeGreeting(name) {
  return `Hello, my name is ${name}!`;
}

const name = 'Miriam';
const greeting = makeGreeting(name);
console.log(greeting);
// "Hello, my name is Miriam!"

Nếu chức năng đồng bộ mất nhiều thời gian thì sao?

Chương trình bên dưới sử dụng thuật toán rất kém hiệu quả để tạo nhiều số nguyên tố lớn khi người dùng nhấp vào nút "Tạo số nguyên tố". Số lượng số nguyên tố do người dùng chỉ định càng cao thì thao tác sẽ càng mất nhiều thời gian

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<div id="output">div>

const MAX_PRIME = 1000000;

function isPrime(n) {
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) {
      return false;
    }
  }
  return n > 1;
}

const random = (max) => Math.floor(Math.random() * max);

function generatePrimes(quota) {
  const primes = [];
  while (primes.length < quota) {
    const candidate = random(MAX_PRIME);
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }
  return primes;
}

const quota = document.querySelector('#quota');
const output = document.querySelector('#output');

document.querySelector('#generate').addEventListener('click', () => {
  const primes = generatePrimes(quota.value);
  output.textContent = `Finished generating ${quota.value} primes!`;
});

document.querySelector('#reload').addEventListener('click', () => {
  document.location.reload();
});

Hãy thử nhấp vào "Tạo số nguyên tố". Tùy thuộc vào tốc độ máy tính của bạn, có thể sẽ mất vài giây trước khi chương trình hiển thị thông báo "Đã hoàn tất. " thông điệp

Ví dụ tiếp theo giống như ví dụ trước, ngoại trừ chúng tôi đã thêm một hộp văn bản để bạn nhập vào. Lần này, hãy nhấp vào "Tạo số nguyên tố" và thử nhập vào hộp văn bản ngay sau đó

Bạn sẽ thấy rằng trong khi chức năng

function makeGreeting(name) {
  return `Hello, my name is ${name}!`;
}

const name = 'Miriam';
const greeting = makeGreeting(name);
console.log(greeting);
// "Hello, my name is Miriam!"

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<textarea id="user-input" rows="5" cols="62">
Try typing in here immediately after pressing "Generate primes"
textarea>

<div id="output">div>

textarea {
  display: block;
  margin: 1rem 0;
}

const MAX_PRIME = 1000000;

function isPrime(n) {
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) {
      return false;
    }
  }
  return n > 1;
}

const random = (max) => Math.floor(Math.random() * max);

function generatePrimes(quota) {
  const primes = [];
  while (primes.length < quota) {
    const candidate = random(MAX_PRIME);
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }
  return primes;
}

const quota = document.querySelector('#quota');
const output = document.querySelector('#output');

document.querySelector('#generate').addEventListener('click', () => {
  const primes = generatePrimes(quota.value);
  output.textContent = `Finished generating ${quota.value} primes!`;
});

document.querySelector('#reload').addEventListener('click', () => {
  document.location.reload();
});

Đây là vấn đề cơ bản với các chức năng đồng bộ chạy dài. Những gì chúng tôi cần là một cách để chương trình của chúng tôi

1. Bắt đầu một hoạt động dài hạn bằng cách gọi một chức năng
2. Để chức năng đó bắt đầu hoạt động và quay lại ngay lập tức, để chương trình của chúng tôi vẫn có thể phản hồi các sự kiện khác
3. Thông báo cho chúng tôi về kết quả của hoạt động khi nó hoàn thành

Đó chính xác là những gì các chức năng không đồng bộ có thể làm. Phần còn lại của mô-đun này giải thích cách chúng được triển khai trong JavaScript

Mô tả mà chúng ta vừa thấy về các hàm không đồng bộ có thể nhắc bạn về các trình xử lý sự kiện và nếu đúng như vậy thì bạn đã đúng. Trình xử lý sự kiện thực sự là một dạng lập trình không đồng bộ. bạn cung cấp một chức năng (trình xử lý sự kiện) sẽ được gọi, không phải ngay lập tức mà bất cứ khi nào sự kiện xảy ra. Nếu "sự kiện" là "hoạt động không đồng bộ đã hoàn thành", thì sự kiện đó có thể được sử dụng để thông báo cho người gọi về kết quả của một lệnh gọi hàm không đồng bộ

Một số API không đồng bộ ban đầu đã sử dụng các sự kiện theo cách này. API

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<div id="output">div>

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<div id="output">div>

Ví dụ sau đây cho thấy điều này trong hành động. Nhấn "Click to start request" để gửi yêu cầu. Chúng tôi tạo một

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<div id="output">div>

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<div id="output">div>

Sau khi thêm trình lắng nghe sự kiện, chúng tôi gửi yêu cầu. Lưu ý rằng sau này, chúng tôi có thể đăng nhập "Yêu cầu XHR đã bắt đầu". nghĩa là, chương trình của chúng tôi có thể tiếp tục chạy trong khi yêu cầu đang diễn ra và trình xử lý sự kiện của chúng tôi sẽ được gọi khi yêu cầu hoàn tất

<button id="xhr">Click to start requestbutton>
<button id="reload">Reloadbutton>

<pre readonly class="event-log">pre>

pre {
  display: block;
  margin: 1rem 0;
}

const log = document.querySelector('.event-log');

document.querySelector('#xhr').addEventListener('click', () => {
  log.textContent = '';

  const xhr = new XMLHttpRequest();

  xhr.addEventListener('loadend', () => {
    log.textContent = `${log.textContent}Finished with status: ${xhr.status}`;
  });

  xhr.open('GET', 'https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json');
  xhr.send();
  log.textContent = `${log.textContent}Started XHR request\n`;});

document.querySelector('#reload').addEventListener('click', () => {
  log.textContent = '';
  document.location.reload();
});

Điều này giống như các trình xử lý sự kiện mà chúng ta đã gặp trong mô-đun trước, ngoại trừ việc thay vì sự kiện là hành động của người dùng, chẳng hạn như người dùng nhấp vào nút, thì sự kiện này là sự thay đổi trạng thái của một số đối tượng

Trình xử lý sự kiện là một loại gọi lại cụ thể. Một cuộc gọi lại chỉ là một chức năng được truyền vào một chức năng khác, với mong muốn rằng cuộc gọi lại sẽ được gọi vào thời điểm thích hợp. Như chúng ta vừa thấy, các cuộc gọi lại từng là cách chính để triển khai các chức năng không đồng bộ trong JavaScript

Tuy nhiên, mã dựa trên cuộc gọi lại có thể khó hiểu khi bản thân cuộc gọi lại phải gọi các hàm chấp nhận cuộc gọi lại. Đây là tình huống phổ biến nếu bạn cần thực hiện một số thao tác chia nhỏ thành một loạt các chức năng không đồng bộ. Ví dụ, hãy xem xét những điều sau đây

function makeGreeting(name) {
  return `Hello, my name is ${name}!`;
}

const name = 'Miriam';
const greeting = makeGreeting(name);
console.log(greeting);
// "Hello, my name is Miriam!"

Ở đây, chúng tôi có một thao tác được chia thành ba bước, trong đó mỗi bước phụ thuộc vào bước cuối cùng. Trong ví dụ của chúng tôi, bước đầu tiên thêm 1 vào đầu vào, bước thứ hai thêm 2 và bước thứ ba thêm 3. Bắt đầu với đầu vào là 0, kết quả cuối cùng là 6 (0 + 1 + 2 + 3). Là một chương trình đồng bộ, điều này rất đơn giản. Nhưng nếu chúng ta triển khai các bước bằng cách sử dụng lệnh gọi lại thì sao?

function makeGreeting(name) {
  return `Hello, my name is ${name}!`;
}

const name = 'Miriam';
const greeting = makeGreeting(name);
console.log(greeting);
// "Hello, my name is Miriam!"

Bởi vì chúng tôi phải gọi các cuộc gọi lại bên trong các cuộc gọi lại, chúng tôi nhận được một hàm

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<div id="output">div>

Khi chúng ta lồng các cuộc gọi lại như thế này, nó cũng có thể rất khó xử lý lỗi. thường thì bạn phải xử lý lỗi ở từng cấp của “kim tự tháp”, thay vì chỉ xử lý lỗi một lần ở cấp cao nhất

Vì những lý do này, hầu hết các API không đồng bộ hiện đại không sử dụng lệnh gọi lại. Thay vào đó, nền tảng của lập trình bất đồng bộ trong JavaScript là

<label for="quota">Number of primes:label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primesbutton>
<button id="reload">Reloadbutton>

<div id="output">div>

JavaScript là phương tiện không đồng bộ hay đồng bộ?

Chức năng JavaScript có không đồng bộ không?

JavaScript nào không đồng bộ?

JavaScript không đồng bộ theo mặc định?