Làm cách nào để tạm dừng chức năng trong JavaScript?

Mỗi chức năng có một màu

Tuy nhiên,

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

Điều này có thể xảy ra nếu bạn không biết chi tiết triển khai của

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

Điều này dẫn đến một vấn đề khác, đó là mọi chức năng đều có một màu. Ngay khi bạn thực hiện lệnh gọi không đồng bộ trong một hàm, bạn phải làm cho chính hàm đó không đồng bộ và trình gọi hàm này cũng không đồng bộ và trình gọi của nó cũng vậy,

Vì vậy, có cách nào khác để tạm dừng một chức năng JavaScript mà không cần phải

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

pause[2000].then[fetchData]

Điều này sẽ đơn giản hơn nhiều, khiến mọi thứ dường như "đồng bộ"

Vì vậy, là điều này có thể?

Để có thể tạm dừng một chức năng JavaScript, điều gì đó được quyết định trong thời gian chạy JavaScript

Vì vậy, hôm nay chúng ta có đi sâu vào công cụ thời gian chạy JavaScript không?

Không thực sự, tôi không biết nhiều về C++ hoặc bất kỳ ngôn ngữ nào mà thời gian chạy JavaScript được triển khai. 🙈

Nhưng chúng tôi sẽ viết một thời gian chạy đơn giản bằng JavaScript, với một số ràng buộc. [Thôi nào, thật khó để viết toàn bộ thời gian chạy, việc thêm các ràng buộc sẽ giúp tôi hoàn thành nó dễ dàng hơn trong một bài đăng trên blog]

Viết "thời gian chạy"

Hạn chế đầu tiên. điểm vào

Ràng buộc đầu tiên đối với thời gian chạy là phải có một điểm vào

Trong trường hợp của chúng tôi, chúng tôi sẽ biến

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

pause[2000].then[fetchData]

Vì vậy, thời gian chạy của chúng tôi trông giống như thế này

pause[2000].then[fetchData]

Ok, vậy là chúng ta có cấu trúc cơ bản, tiếp theo là gì?

Đầu tiên, chúng ta cần tìm cách tạm dừng một hàm JS giữa chừng mà không cần sử dụng

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

Chà, có

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

async function fetchAllData[] {
  const data1 = await fetchData1[...]
  await pause[1000]
  const data2 = await fetchData2[...]
  return {...data1, ...data2}
}

Nhưng trong cả hai trường hợp, không có cách nào để "tiếp tục" chức năng. Tuy nhiên, nó vẫn là một điểm khởi đầu tốt

Một cách để "tiếp tục" chức năng là chạy lại chức năng

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

async function fetchAllData[] {
  const data1 = await fetchData1[...]
  await pause[1000]
  const data2 = await fetchData2[...]
  return {...data1, ...data2}
}

Bỏ qua tất cả những nghi ngờ mà bạn có về lý do tại sao chạy lại toàn bộ chức năng

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

Việc triển khai hiện tại không chính xác và sẽ dẫn chúng tôi đến một vòng lặp vô hạn, bởi vì chúng tôi đã "tiếp tục" chức năng "đã tạm dừng" ngay lập tức, điều này chỉ xảy ra sau khi

pause[2000].then[fetchData]

async function fetchAllData[] {
  const data1 = await fetchData1[...]
  await pause[1000]
  const data2 = await fetchData2[...]
  return {...data1, ...data2}
}

Tuy nhiên, vòng lặp vô hạn vẫn xảy ra, đó là bởi vì

pause[2000].then[fetchData]

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      callback[wedding];
    }
  }];
}

Làm cách nào để chúng tôi ném Lỗi khi

pause[2000].then[fetchData]

Người ta có thể đạt được nó bằng cách lưu trữ phản hồi

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

Nó hoạt động

Sau khi chạy chức năng chính một vài lần, bằng cách "tạm dừng" và "tiếp tục", hay tôi có thể nói là "thoát sớm" và "chạy lại", cuối cùng chúng tôi nhấn vào câu lệnh cuối cùng của chức năng chính và kết thúc chức năng

Ngoại trừ, nếu bạn nhìn vào bảng điều khiển, do chạy lại nhiều lần, chúng tôi thấy

pause[2000].then[fetchData]

Đó là bởi vì,

pause[2000].then[fetchData]

Hạn chế thứ hai. chức năng thuần túy

Hạn chế thứ hai trong thời gian chạy của chúng tôi là chỉ sử dụng các hàm thuần túy. Nếu bạn muốn gọi các hàm có tác dụng phụ, bạn phải sử dụng cấu trúc đặc biệt của chúng tôi,

pause[2000].then[fetchData]

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

Vậy,

pause[2000].then[fetchData]

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

Những gì chúng tôi đang cố gắng làm ở đây là, chúng tôi đẩy tất cả các tác dụng phụ vào một mảng và chỉ chạy tất cả chúng khi cuối cùng chúng tôi hoàn thành chức năng

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

Và nếu chúng ta "tạm dừng" hàm của mình, trước khi chạy lại hàm

function getProfile[userId] {
  return window.fetch[`//api.com/user/${userId}`];
}

async function getWeddingDetail[weddingId] {
  try {
    // pause to get detail through IO
    const wedding = await window.fetch[`//api.com/wedding/${weddingId}`];
    // and resume when the result is back, and pause again...
    const groom = await getProfile[wedding.groomId];
    // .. and resume and pause ...
    const bride = await getProfile[wedding.brideId];
    // .. and resume
    return { wedding, bride, groom };
  } catch [error] {
    handleError[error];
  }
}

Chạy lại, và vâng, nó hoạt động

Bạn có thể dùng thử mã hoàn chỉnh trong CodeSandbox

Chúng ta đã làm gì cho đến nay?

Để bắt chước tạm dừng và tiếp tục một hàm trong JavaScript, chúng ta có thể đưa ra một lỗi để "tạm dừng" việc thực thi hàm giữa chừng và "tiếp tục" nó bằng cách chạy lại hàm

Để "tiếp tục" từ nơi dừng lại, thay vào đó, điểm mà chúng tôi đã đưa ra lỗi sẽ trả về một giá trị, để có cảm giác như chúng tôi đang tiếp tục và tiếp tục từ điểm đó. Để đạt được điều này, chúng ta có thể sử dụng một số cơ chế lưu trữ

Cuối cùng, để chạy lại hàm nhiều lần một cách an toàn, chúng ta cần đảm bảo rằng hàm đó thuần túy. Nếu có tác dụng phụ, chúng ta cần thu thập chúng và chỉ áp dụng khi chức năng đã đi đến thành công

Được, tuyệt đấy. Tại sao chúng ta lại làm việc này?

Chà, ý tưởng về cách tạm dừng và tiếp tục một hàm JavaScript xuất hiện khi tôi đang đọc về React Suspense. Với Suspense, việc tìm nạp/nhận dữ liệu có thể được viết một cách khai báo

function getProfile[userId, callback] {
  return window.fetch[`//api.com/user/${userId}`, callback];
}

function getWeddingDetail[itemId, callback] {
  // call IO
  window.fetch[`//api.com/wedding/${itemId}`, function callback[
    error,
    wedding
  ] {
    // get notified when the result is back
    if [error] {
      handleError[error];
    } else {
      getProfile[wedding.groomId, function[groomError, groom] {
        if [groomError] {
          handleError[groomError];
        } else {
          getProfile[wedding.brideId, function[brideError, bride] {
            if [brideError] {
              handleError[brideError];
            } else {
              callback[{ wedding, bride, groom }];
            }
          }];
        }
      }];
    }
  }];
}

pause[2000].then[fetchData]

Hãy nghĩ về cách bạn sẽ viết trong React

• Thay vì cung cấp một điểm vào, chức năng

  pause[2000].then[fetchData]
  

  60 của bạn là điểm vào cho React. Để "tiếp tục" mỗi lần "tạm dừng" kết xuất, React gọi hàm

  pause[2000].then[fetchData]
  

  60 nhiều lần
• Chức năng kết xuất của bạn phải thuần túy và không có tác dụng phụ
• Để

  pause[2000].then[fetchData]
  

  46, bạn sử dụng

  pause[2000].then[fetchData]
  

  63 thay thế
• Để tìm nạp + bộ đệm, bạn sử dụng

  pause[2000].then[fetchData]
  

  64 để tạo tài nguyên
• Ngoại trừ, thay vì "tạm dừng" và không làm gì cả, React xử lý "tạm dừng" với thành phần

  pause[2000].then[fetchData]
  

  65 gần nhất để hiển thị một số nội dung dự phòng. Khi lời hứa được giải quyết, React "tiếp tục" kết xuất và kết xuất nội dung với dữ liệu

Tuy nhiên, đây không phải là hồi hộp

Không, tôi không nghĩ vậy

Sự hồi hộp dựa trên một số khái niệm lập trình chức năng, được gọi là "sự tiếp tục được phân tách bằng một lần", được giải thích trong "Hiệu ứng đại số cho phần còn lại của chúng ta" của Dan Abramov

Ghi chú kết thúc

Toàn bộ bài viết này dựa trên một thử nghiệm tưởng tượng mà tôi đã có khi cố gắng tìm hiểu cơ chế của React Suspense. Vì vậy, xin thứ lỗi cho tôi nếu dòng chảy của nội dung hơi khó hiểu hoặc thô thiển

Tuy nhiên, sau khi viết ra quá trình suy nghĩ của mình, tôi đã nghiên cứu thêm và nhận ra rằng "tạm dừng và tiếp tục thực thi" là một khái niệm gọi là "sự tiếp tục" trong lập trình chức năng

Làm cách nào để tạo chức năng chờ trong JavaScript?

Làm cách nào để tạm dừng một vòng lặp trong JavaScript?

Làm cách nào để tạo độ trễ trong JavaScript?

Làm cách nào để đợi 1 giây trong JavaScript?