promise基本使用 簡單的運動效果

2022-08-28 09:33:12 字數 607 閱讀 6050

一開始接觸到promise的時候也是比較懵逼的,不太理解他們的奧秘在哪兒,以及我們為什麼要使用它,隨著深入的了解,覺得他很大程度了解決了我們之前的**地域的問題,還有關於資料請求非同步的方式,promise極大程度的解決了我們的**多層巢狀難以閱讀理解的問題。

接著入正題,現在我們要實現乙個邊框的劃入效果。這個效果實現起來也是很容易的,css3基本上就能夠實現了,這裡我們不討論css3.只討論js的使用。下面貼**。

效果演示如下

如果使用jquery的小夥伴可以直接使用jquery的animate函式,這裡我們使用的原生js,自己自定義實現了aniamte方法,當動畫結束後會觸發乙個**函式,這裡我們就可以看到animate函式多層巢狀,看起來非常的不美觀,而且如果寫的很多的話自己很容易都會被繞暈。

下面附上用promise實現的效果**

這樣一看**是不是清晰了好多,promise實現的效果更易於閱讀,也避免了之前的多層巢狀的問題,而且可以鏈式呼叫。最近一直在研究promise原始碼的實現,底層實現是有一點點繞,可能需要js基礎比價紮實,我看了好幾天才稍微有點頭緒,未來的路很長,還需要不斷的學習來充實自己。

promise的基本使用

promise 主要是解決非同步深層的巢狀問題 promise的基本使用 var p newpromise function resolve,reject sele return p 補充 在promise中,我們通常用 then來得到非同步任務正確的值,用.catch來得到非同步任務錯誤的結果 現...

promise的簡單使用

var p new promise function resolve,reject 3000 settimeout function 2000 resolve 123 reject 123 ajax error reject var p2 p.then data res p2.then functi...

Promise簡單使用

reject 方法 當promse中包含非同步操作時,例項的 then catch 會在下個 eventloop執行,但是promise中的 會同步執行 console.log 4 settimeout 200 const promise newpromise resolve,reject prom...