<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          讓我們來創建一個JavaScript Wait函數

          時間:?2017-11-23閱讀:?6343標簽:?函數

          Async/await以及它底層promises的應用正在猛烈地沖擊著JS的世界。在大多數客戶端和JS服務端平臺的支持下,回調編程已經成為過去的事情。

          當然,基于回調的編程很丑陋的。

          如果您還沒有使用過,那么開始接觸并使用async/await和promise是非常有必要的。在async/await之前,我并沒有十分癡迷于promise,就像您看到的下面的代碼:


          比回調地獄好點,但并不美觀

          關于async/await有很多很好的介紹,所以在這里就不再做過多討論,只占用15秒:您使您的函數返回一個promise,然后使用await(內置了一個異步函數)來調用這個promise。

          These examples will also make use of a new-ish JS feature, arrow functions. 這些示例還將使用一個新的JS特性,箭頭函數。如果您習慣于下面這種寫法:

          function(a) { return console.log(a) }

          現在改為:

          (a) => console.log(a)

          這樣,我們就可以創建我們的Wait函數了。

          Wait函數(在某些環境中也叫Sleep函數)很容易理解、使用和創建。顧名思義,就是我們想讓程序等待一段時間。

          只是設置一段延時來執行我們的promise。我們可以自定義我們等待的時間ms。

          var wait = ms => new Promise((r, j)=>setTimeout(r, ms))
          

          wait(2000)會返回一個promise,然后在2000ms后執行(2s)。

          // Promise syntax
          var prom = wait(2000)  // prom, is a promise
          var showdone = ()=>console.warn('done')
          prom.then(showdone)
          
          // same thing, using await syntax
          await wait(2000)
          console.warn('done')
          

          使用async/await語法要比promise的.then()更優雅。我們用一個立即執行函數包裹它,以便簡潔。

          (async () => { await wait(2000); console.warn('done') })()
          

          或在常規代碼中

          var x = 1
          var y = 2
          await wait(2000)
          console.warn(x)
          

          What if we want to wait on an event, instead of just waiting x ms of time? 如果我們想等待某個事件,而不只是等待多少毫秒的延時呢?只需要控制這個promise什么時候執行就行了。

          我們甚至可以設置調用的超時時間,如果事件永遠不會發生,代碼就不會一直等待。

          假設在一個web頁面中,我們想要等待一個內容為“Hello World”的DOM元素。我們會每100ms檢查一次,并在2s后超時退出。

          <div id=a>s</div>
          <script>
          
          var e = document.querySelector('#a')
          
            var waitForHello = timeoutms => new Promise((r, j)=>{
              var check = () => {
                console.warn('checking')
                if(e.innerHTML == 'Hello world') 
                  r()
                else if((timeoutms -= 100) < 0)
                  j('timed out!')
                else
                  setTimeout(check, 100)
              }
              setTimeout(check, 100)
            })
          
          //setTimeout(()=>{e.innerHTML='Hello world'}, 1000)
          
            (async ()=>{
              a.innerHTML = 'waiting..'
              waitForHello(2000)
            })()
          
          </script>
          

          不注釋掉setTimeout那一行,就會在1s后將這個DIV的內容設置為“Hello World”,否則將會超時退出。

          如您所見,async/await為您的代碼創造了無限的可能性。

          原文鏈接

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/158

          你也許不知道的javascript高級函數

          高階函數是對其他函數進行操作的函數,可以將它們作為參數或通過返回它們。簡單來說,高階函數是一個函數,它接收函數作為參數或將函數作為輸出返回。例如Array.prototype.map,Array.prototype.filter,Array.prototype.reduce 都是一些高階函數。

          理解與使用JavaScript中的回調函數

          在JavaScript中,函數是第一類對象,這意味著函數可以像對象一樣按照第一類管理被使用。既然函數實際上是對象:它們能被“存儲”在變量中,能作為函數參數被傳遞,能在函數中被創建,能從函數中返回。

          JavaScript中的構造函數

          ECMAScript 中,構造函數與其他函數的唯一區別,就在于調用它們的方式不同。不過,構造函數畢竟也是函數,不存在定義構造函數的特殊語法。任何函數,只要通過 new 操作符來調用

          10個非常實用的Js工具函數

          生成一周時間new Array 創建的數組只是添加了length屬性,并沒有實際的內容。通過擴展后,變為可用數組用于循環,類型判斷判斷核心使用Object.prototype.toString,這種方式可以準確的判斷數據類型。

          Javascript之尾調用

          尾調用是函數式編程的一個重要的概念,本篇文章就來學習下尾調用相關的知識。有說過在一個函數中輸出一個函數,則這個函數可以被成為高階函數。本文的主角尾調用和它類似,如果一個函數返回的是另一個函數的調用結果,那么就被稱為尾調用。

          高階函數

          filter用于對數組進行過濾。 它創建一個新數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素。注意:filter()不會對空數組進行檢測、不會改變原始數組

          JavaScript 函數式編程導論

          近年來,函數式編程(Functional Programming)已經成為了JavaScript社區中炙手可熱的主題之一,無論你是否欣賞這種編程理念,相信你都已經對它有所了解。即使是前幾年函數式編程尚未流行的時候

          javascript中的匿名方法(函數)是什么?

          方法(method)是通過對象調用的javascript函數。也就是說,方法也是函數,只是比較特殊的函數。JavaScript中的匿名方法即匿名函數是沒有函數名稱的函數。

          JavaScript中怎么調用函數?

          JavaScript怎么調用函數?其實在JavaScript中函數有4種調用方式。下面本篇文章就來給大家介紹一下JavaScript函數的4種調用方式,希望對大家有所幫助。

          CSS的var()函數怎么用?

          CSS中的var()函數可用于插入自定義屬性(有時稱為“css變量”)的值,而不是插入其他屬性值的任何部分。隨著sass,less預編譯的流行,css也隨即推出了變量定義var函數。var()函數,就如同sass和less等預編譯軟件一樣,可以定義變量并且進行對應的使用。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网