JavaScript 中的隨機(jī)圖像生成和緩存

在許多 Web 應(yīng)用程式中，出於各種目的（例如佔(zhàn)位符、縮圖或視覺內(nèi)容）顯示隨機(jī)圖像是很常見的。然而，為每個(gè)請(qǐng)求產(chǎn)生隨機(jī)圖像可能效率很低，特別是如果我們想多次重複使用同一個(gè)圖像。在本文中，我們將探討如何使用 JavaScript 高效產(chǎn)生隨機(jī)圖像並實(shí)現(xiàn)快取機(jī)制以避免冗餘 API 呼叫。

getRandomImage 函數(shù)

getRandomImage 函數(shù)是一個(gè)實(shí)用函數(shù)，它根據(jù)提供的寬度、高度和隨機(jī) ID 產(chǎn)生隨機(jī)圖像 URL。讓我們仔細(xì)看看這個(gè)函數(shù)是如何運(yùn)作的：

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

讓我們一步一步分解程式碼：

1. 我們建立一個(gè)名為 imageCache 的空對(duì)象，作為儲(chǔ)存生成的映像 URL 的快取。

2. getRandomImage 函數(shù)採用三個(gè)參數(shù)：寬度、高度和 randomId。這些參數(shù)使我們能夠控制隨機(jī)圖像的尺寸和唯一性。

3. 在函數(shù)內(nèi)部，我們透過連接寬度、高度和 randomId 值來產(chǎn)生唯一的快取鍵。該密鑰將用於儲(chǔ)存和從快取中檢索圖像 URL。

4. 我們檢查快取中是否已存在與快取鍵對(duì)應(yīng)的圖片 URL。如果是這樣，我們只需返回快取的圖像 URL，而不是產(chǎn)生新的圖像 URL。

5. 如果在快取中找不到圖片 URL，我們將繼續(xù)使用 picsum.photos API 產(chǎn)生新 URL。此API根據(jù)指定的寬度、高度和隨機(jī)ID提供各種尺寸的隨機(jī)圖片。

6. 新產(chǎn)生的圖像 URL 將使用快取鍵儲(chǔ)存在快取中以供將來使用。

7. 最後，我們回傳產(chǎn)生的圖片 URL。

快取的好處

在 getRandomImage 函數(shù)中實(shí)作快取機(jī)制有幾個(gè)優(yōu)點(diǎn)：

• 效率：透過快取圖片 URL，我們避免對(duì)相同的寬度、高度和隨機(jī) ID 組合進(jìn)行冗餘 API 呼叫。這提高了應(yīng)用程式的整體效能並減少了不必要的網(wǎng)路請(qǐng)求。

• 重複使用：快取機(jī)制允許我們多次重複使用同一張隨機(jī)圖像，而不必每次都重新產(chǎn)生新的圖像 URL。當(dāng)在應(yīng)用程式的不同部分或元件中顯示相同的映像時(shí)，這特別有用，可以提高一致性並減少不必要的開銷。

• 一致性：當(dāng)再次遇到相同的寬度、高度和隨機(jī)ID 組合時(shí)，該函數(shù)會(huì)從快取中檢索圖像URL，確保整個(gè)應(yīng)用程式中顯示圖像的一致性。

結(jié)論

在本文中，我們探索如何使用 getRandomImage 函數(shù)在 JavaScript 中高效地產(chǎn)生隨機(jī)圖像。透過實(shí)現(xiàn)快取機(jī)制，我們可以避免冗餘的 API 呼叫並提高 Web 應(yīng)用程式的效能。快取機(jī)制具有提高效率、影像重複使用和一致性等優(yōu)點(diǎn)。請(qǐng)隨意調(diào)整 getRandomImage 函數(shù)並將其合併到您的專案中，以增強(qiáng)隨機(jī)影像的生成。

完整程式碼：

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

請(qǐng)記住調(diào)整函數(shù)和快取機(jī)制以滿足您的特定要求，並根據(jù)需要調(diào)整快取策略。

訂閱我的時(shí)事通訊，您將獲得提示、技巧和挑戰(zhàn)，以保持您的技能敏銳。訂閱電子報(bào)

以上是JavaScript 中的隨機(jī)圖像生成和緩存的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！