企业官网建设流程全解析

上海外贸网站,做sohu最好的推广网站,怎么看网站是用什么程序做的,wordpress修改编辑器欢迎使用我的小程序#x1f447;#x1f447;#x1f447;#x1f447; 俱好用助手功能介绍 大家好#xff01;今天我们来聊聊JavaScript中一个既重要又有趣的话题——异步编程。如果你曾经遇到过网页“卡死”的情况#xff0c;或者好奇为什么有些操作不会阻塞页面交互 俱好用助手功能介绍大家好今天我们来聊聊JavaScript中一个既重要又有趣的话题——异步编程。如果你曾经遇到过网页“卡死”的情况或者好奇为什么有些操作不会阻塞页面交互那么这篇文章就是为你准备的同步 vs 异步点外卖的智慧想象一下你要准备一顿晚餐同步方式不推荐走进厨房开始煮饭站在灶台前盯着锅什么都不做直到饭煮好20分钟饭好了才开始洗菜切菜再花30分钟炒菜总共耗时50分钟异步方式聪明做法开始煮饭设置定时器在饭煮的同时洗菜切菜饭好了的提示音响起时处理饭继续炒菜总共耗时35分钟JavaScript的异步编程就像是那个聪明的厨师让多个任务可以同时进行回调函数JavaScript的“电话通知”最早的异步处理方式是回调函数// 点外卖的比喻下单后留下电话号码外卖到了打电话通知你orderFood(pizza,function(pizza){console.log(我的${pizza}到了可以开动了);});console.log(在等外卖的时候我可以继续刷剧...);但问题来了——如果你需要按顺序做多件事呢// “回调地狱”出现了orderFood(pizza,function(pizza){getDrink(cola,function(cola){buyNapkins(function(napkins){console.log(准备好享用${pizza}${cola}了还有${napkins}张餐巾纸);// 更多嵌套...});});});这就像是等外卖→外卖到了买饮料→饮料到了买纸巾……效率太低了Promise外卖订单追踪系统ES6带来了Promise就像外卖平台的应用可以追踪订单状态// 创建一个Promise就像下一个外卖订单constfoodOrdernewPromise((resolve,reject){// 模拟烹饪时间setTimeout((){constsuccessMath.random()0.1;// 90%的成功率success?resolve(香喷喷的披萨):reject(抱歉烤箱坏了);},2000);});// 追踪订单状态foodOrder.then(food{console.log(${food}送达);return吃完了该收拾了;// 可以继续返回新的Promise}).then(message{console.log(message);}).catch(error{console.log(${error});}).finally((){console.log(这次订餐体验结束了);});console.log(订单已下我可以继续工作...);async/await像写同步代码一样写异步ES7的async/await让异步代码看起来像同步代码一样直观asyncfunctionenjoyDinner(){try{console.log(开始准备晚餐...);// 看起来是同步的但实际上是异步的constpizzaawaitorderPizza();console.log(${pizza}准备好了);constdrinkawaitorderDrink();console.log(${drink}也到了);// 这两个可以同时进行const[napkins,movie]awaitPromise.all([buyNapkins(),loadMovie()]);console.log(完美有${pizza}、${drink}、${napkins}和电影${movie});}catch(error){console.log(晚餐计划失败${error});}}// 模拟的异步函数functionorderPizza(){returnnewPromise(resolve{setTimeout(()resolve(意大利香肠披萨),2000);});}事件循环JavaScript的“时间管理大师”JavaScript是单线程的但它有一个神奇的事件循环机制console.log(1. 开始做饭);setTimeout((){console.log(4. 定时器到时间了饭煮好了);},0);Promise.resolve().then((){console.log(3. Promise微任务尝一下味道);});console.log(2. 继续切菜);// 输出顺序// 1. 开始做饭// 2. 继续切菜// 3. Promise微任务尝一下味道// 4. 定时器到时间了饭煮好了简单来说同步任务立即执行微任务Promise在当前任务结束后立即执行宏任务setTimeout在微任务之后执行实际应用有趣的例子// 模拟一个加载进度指示器asyncfunctionloadContentWithProgress(){consttasks[加载用户数据,获取朋友圈,下载图片,初始化聊天];for(leti0;itasks.length;i){// 模拟每个任务的耗时awaitnewPromise(resolvesetTimeout(resolve,Math.random()*1000500));constprogress((i1)/tasks.length)*100;console.log(${tasks[i]}... 进度${progress.toFixed(0)}%);}console.log(✅ 所有内容加载完成);}// 使用Promise.race实现超时控制functionfetchWithTimeout(url,timeout3000){constfetchPromisefetch(url);consttimeoutPromisenewPromise((_,reject){setTimeout(()reject(newError(请求超时)),timeout);});returnPromise.race([fetchPromise,timeoutPromise]);}异步编程的黄金法则避免阻塞长时间运行的任务要异步化错误处理不要忘记.catch()或try-catch适度使用不是所有东西都需要异步保持简单能用async/await就不用复杂的Promise链总结JavaScript的异步编程就像生活中的多任务处理我们不会等水烧开时傻站着而是同时准备其他食材。从回调函数到Promise再到async/awaitJavaScript为我们提供了越来越优雅的方式来处理异步操作。记住好的异步代码就像一场精心编排的交响乐——每个部分在正确的时间奏响整体和谐而不混乱。希望这篇文章让你对JavaScript异步编程有了更直观的理解现在试着把你的下一个耗时操作改成异步吧让你的应用变得更加流畅小挑战你能用async/await写一个模拟“同时煮面、煎蛋、烤面包”的早餐制作程序吗在评论区分享你的实现吧