vivo TWS Air開箱體驗：真輕 臻好聽
在vivo S15系列新機的發布會上，vivo的最新款真無線藍牙耳機vivo TWS Air也一同發布，本次就這款耳機新品給大家帶來一個簡單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產
許多編程語言都有一個 sleep 函數，可以延遲程序的執行若干秒。JavaScript缺少這個內置功能，但不用擔心。在這篇文章中，我們將探討在JavaScript代碼中實現延遲的各種技巧，同時考慮到該語言的異步性質。
對于那些只想快速解決問題而不想深入了解技術細節的人，我們也有簡單明了的解決方案。下面是如何在你的JavaScript工具箱中添加一個 sleep 函數的最直接方式：
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}console.log('Hello');sleep(2000).then(() => { console.log('World!'); });運行這段代碼，你會在控制臺看到 “Hello”。然后，在短暫的兩秒鐘后，“World!”v會接著出現。這是一種既簡潔又有效的引入延遲的方法。
如果你只是為了這個來的，那太好了！但如果你對“為什么”和“怎么做”的原因感到好奇，還有更多可以學習的內容。JavaScript中處理時間有其細微之處，了解這些可能會對你有所幫助。
現在我們已經有了一個快速的解決方案，讓我們深入了解JavaScript的執行模型的機制。理解這一點對于有效地管理代碼中的時間和異步操作至關重要。
考慮以下Ruby代碼：
require 'net/http'require 'json'url = 'https://api.github.com/users/jameshibbard'uri = URI(url)response = JSON.parse(Net::HTTP.get(uri))puts response['public_repos']puts 'Hello!'正如人們所期望的，這段代碼向GitHub API發送一個請求以獲取我的用戶數據。然后解析響應，輸出與我的GitHub帳戶關聯的公共倉庫的數量，最后在屏幕上打印“Hello!”。執行是從上到下進行的。
相比之下，這是相同功能的JavaScript版本：
fetch('https://api.github.com/users/jameshibbard') .then(res => res.json()) .then(json => console.log(json.public_repos));console.log('Hello!');如果你運行這段代碼，它會先在屏幕上輸出“Hello!”，然后輸出與我的GitHub帳戶關聯的公共倉庫的數量。
這是因為在JavaScript中，從API獲取數據是一個異步操作。JavaScript解釋器會遇到 fetch 命令并發送請求。然而，它不會等待請求完成。相反，它會繼續執行，將“Hello!”輸出到控制臺，然后當請求在幾百毫秒后返回時，它會輸出倉庫的數量。
既然我們已經更好地理解了JavaScript的執行模型，讓我們看看JavaScript是如何處理延遲和異步代碼的。
在JavaScript中創建延遲的標準方法是使用其 setTimeout 方法。例如：
console.log('Hello');setTimeout(() => { console.log('World!'); }, 2000);這將在控制臺上輸出 "Hello"，然后兩秒后輸出 "World!"。在很多情況下，這已經足夠了：做某事，然后在短暫的延遲后，做其他事情。問題解決！
但不幸的是，事情并不總是那么簡單。
你可能會認為 setTimeout 會暫停整個程序，但事實并非如此。它是一個異步函數，這意味著其余的代碼不會等待它完成。
例如，假設你運行了以下代碼：
console.log('Hello');setTimeout(() => { console.log('World!'); }, 2000);console.log('Goodbye!');你會看到以下輸出：
HelloGoodbye!World!注意“Goodbye!”是如何出現在“World!”之前的？這是因為 setTimeout 不會阻塞其余代碼的執行。
這意味著你不能這樣做：
console.log('Hello');setTimeout(1000);console.log('World');"Hello" 和 "World" 會立即被記錄在控制臺上，之間沒有明顯的延遲。
你也不能這樣做：
for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, i * 1000);}花一秒鐘考慮一下上面的代碼片段可能會發生什么。
它不會在每個數字之間延遲一秒鐘打印數字 0 到 4。相反，你實際上會得到五個 4，它們在四秒后一次性全部打印出來。為什么呢？因為循環不會暫停執行。它不會等待 setTimeout 完成才進入下一次迭代。
那么 setTimeout 實際上有什么用呢？現在讓我們來看看。
正如你可以在我們的 setTimeout 教程中閱讀到的，原生JavaScript setTimeout 函數在指定的延遲（以毫秒為單位）后調用一個函數或執行一個代碼片段。
這可能在某些情況下是有用的，例如，如果你希望在訪問者瀏覽你的頁面一段時間后顯示一個彈出窗口，或者你希望在從元素上移除懸停效果之前有短暫的延遲（以防用戶意外地鼠標移出）。
setTimeout 方法接受一個函數的引用作為第一個參數。
這可以是函數的名稱：
function greet(){ alert('Howdy!');}setTimeout(greet, 2000);它可以是一個指向函數的變量（函數表達式）：
const greet = function(){ alert('Howdy!');};setTimeout(greet, 2000);或者它可以是一個匿名函數（在這種情況下是箭頭函數）：
setTimeout(() => { alert('Howdy!'); }, 2000);也可以將一段代碼字符串傳遞給 setTimeout 以供其執行：
然而，這種方法是不可取的，因為：
如前所述，setTimeout 非常適合在延遲后觸發一次性操作，但也可以使用 setTimeout（或其表親 setInterval）來讓JavaScript等待直到滿足某個條件。例如，下面是如何使用 setTimeout 等待某個元素出現在網頁上的方式：
function pollDOM () { const el = document.querySelector('my-element'); if (el.length) { // Do something with el } else { setTimeout(pollDOM, 300); // try again in 300 milliseconds }}pollDOM();這假設該元素最終會出現。如果你不確定這是否會發生，你需要考慮取消計時器（使用 clearTimeout 或 clearInterval）。
有時，你可能會發現自己想要在一系列操作中引入延遲。雖然你可以使用各種方法來模擬一個Sleep函數，但還有另一種經常被忽視的方法：遞增超時。
這個思路很簡單：你不是暫停整個執行線程，而是使用 setTimeout 為每個后續操作增加延遲。這樣，你可以創建一個延遲操作的序列，而不會阻塞瀏覽器或損害用戶體驗。
下面是一個快速示例：
let delay = 1000; // 從1秒的延遲開始for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(`這是消息 ${i + 1}`); }, delay); delay += 1000; // 每次迭代延遲增加1秒}在這個示例中，第一條消息將在1秒后出現，第二條消息在2秒后，依此類推，直到第五條消息在5秒后。
這種方法的優點是它不阻塞，易于實現，并且不需要了解 promises 或 async/await。然而，它不適用于需要精確計時或錯誤處理的復雜異步操作
編寫 JavaScript 時，我們經常需要等待某件事情發生（例如，從 API 獲取數據），然后做出響應（例如，更新UI以顯示數據）。
上面的示例使用了一個匿名回調函數來實現這一目的，但如果你需要等待多個事情發生，語法很快就會變得相當復雜，你最終會陷入回調地獄。
幸運的是，這門語言在過去幾年里有了很大的發展，現在為我們提供了新的構造來避免這一點。
例如，使用 async await，我們可以重寫最初獲取 GitHub API信息的代碼：
(async () => { const res = await fetch(`https://api.github.com/users/jameshibbard`); const json = await res.json(); console.log(json.public_repos); console.log('Hello!');})();現在，代碼從上到下執行。JavaScript 解釋器等待網絡請求完成，首先記錄公共倉庫的數量，然后記錄“Hello！”消息。
如果你還在看這篇文章，那么我猜你一定是想阻塞那個執行線程，并讓JavaScript等待一下。
下面是你可能會這樣做的方式：
function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds);}console.log('Hello');sleep(2000);console.log('World!');正如預期的那樣，這將在控制臺上打印“Hello”，暫停兩秒，然后打印“World！”
它通過使用Date.now方法獲取自1970年1月1日以來經過的毫秒數，并將該值分配給一個 date 變量。然后它創建一個空的 currentDate 變量，然后進入一個 do ... while 循環。在循環中，它會重復獲取自1970年1月1日以來經過的毫秒數，并將該值分配給之前聲明的 currentDate 變量。只要 date 和 currentDate 之間的差異小于所需的毫秒數的延遲，循環就會繼續進行。
任務完成了，對嗎？好吧，也不完全是……
也許這段代碼正是你所期望的，但請注意，它有一個很大的缺點：循環會阻塞JavaScript的執行線程，并確保在它完成之前沒有人能與你的程序進行交互。如果你需要很大的延遲，甚至有可能會讓整個程序崩潰。
那么應該怎么做呢？
事實上，也可以結合本文前面學到的技巧來制作一個不太侵入性的 sleep 方法：
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}console.log('Hello');sleep(2000).then(() => { console.log('World!'); });這段代碼將在控制臺上打印“Hello”，等待兩秒，然后打印“World！”在底層，我們使用setTimeout 方法在給定的毫秒數后解析一個 promise。
注意，我們需要使用一個 then 回調來確保第二條消息是帶有延遲的。我們還可以在第一個回調函數后面鏈式地添加更多回調函數。
這樣做是可行的，但看起來不太好看。我們可以使用async ... await來美化它：
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}async function delayedGreeting() { console.log('Hello'); await sleep(2000); console.log('World!'); await sleep(2000); console.log('Goodbye!');}delayedGreeting();這看起來更好看，但這意味著使用 sleep 函數的任何代碼都需要被標記為 async。
當然，這兩種方法仍然有一個缺點（或特點），那就是它們不會暫停整個程序的執行。只有你的函數會睡眠：
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}async function delayedGreeting() { console.log('Hello'); await sleep(2000); // await只暫停當前的異步函數 console.log('World!');}delayedGreeting();console.log('Goodbye!');上面的代碼會依次打印出：
HelloGoodbye!World!這樣，你可以根據需要靈活地使用不同的方法和技術來實現JavaScript中的延遲和異步操作。
我們已經探討了各種在JavaScript中引入延遲的方法。現在讓我們總結一下哪種方法最適合不同的場景，以及哪種方法通常應該避免。
console.log('Hello');setTimeout(() => { console.log('World!'); }, 2000);
本文鏈接：http://www.www897cc.com/showinfo-26-11211-0.htmlJavaScript怎么模擬 delay、sleep、pause、wait 方法
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： C++ 中的隱式轉換：機制、應用與警惕
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號