1.
<div id="aa"></div> <script type="text/javascript"> // new Promise(主线程代码).then(成功微任务, 失败微任务); // async---替代promise // await---替代then var kk = [{ age: 18 }, { age: 19 }, { age: 20 }]; console.log(kk); for (var i = 0; i < kk.length; i++) { document.getElementById("aa").innerHTML += '<div>' + kk[i].age + '</div>'; console.log(kk[i]); } </script>
console:
2.
var kk = [{ age: 18 }, { age: 19 }, { age: 20 }]; console.log(kk); //遍历循环 for (const k_item of kk) { document.getElementById("aa").innerHTML += '<div>' + k_item.age + '</div>'; console.log(k_item.age);
console:
3. 延迟效果
//延迟效果 setTimeout可以实现定时效果,但是,怎么知道它结束呢? //resolve, reject发通知,用then捕获 var kk = [{ age: 18 }, { age: 19 }, { age: 20 }, { age: 22 }, { age: 40 }, { age: 25 }, { age: 23 }]; console.log(kk); async function sleep(sec = 1000) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, sec); }); } async function show() { for (const k_item of kk) { //类似于Thread.sleep(500); await sleep(500); //卡住,卡到sleep()里面的promise发出了resolve() document.getElementById("aa").innerHTML += '<div>' + k_item.age + '</div>'; }; }; show();
console:
页面间隔500ms显示
4.
//class 写死的写法 class MyTask { then(resolve, reject) { console.log('123'); }; }
console:
5.
class MyTask { then(resolve, reject) { console.log('123'); resolve('来自class的promise发出通知的值'); }; } var p = new MyTask(); console.log(p); new Promise((resolve, reject) => { resolve('a123'); }).then(result => { console.log(result); //不继续执行就不用return,否则需要return, 7种类型都可以 return p; }, error => { }).then( result => { console.log(result); });
console:
6. 上面的代码用async await实现
class MyTask { then(resolve, reject) { console.log('123'); resolve('来自class的promise发出通知的值'); }; } var p = new MyTask(); async function ttt() { let result = await 'a123'; console.log(result); let result2 = await p; console.log(result2); } ttt();
console:
联系客服