HoRain云--JavaScript 异步编程

HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐异步的概念什么时候用异步编程回调函数实例实例实例异步 AJAX实例实例异步的概念异步Asynchronous, async是与同步Synchronous, sync相对的概念。在我们学习的传统单线程编程中程序的运行是同步的同步不意味着所有步骤同时运行而是指步骤在一个控制流序列中按顺序执行。而异步的概念则是不保证同步的概念也就是说一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是同步按你的代码顺序执行异步不按照代码顺序执行异步的执行效率更高。以上是关于异步的概念的解释接下来我们通俗地解释一下异步异步就是从主线程发射一个子线程来完成任务。什么时候用异步编程在前端编程中甚至后端有时也是这样我们在处理一些简短、快速的操作时例如计算 1 1 的结果往往在主线程中就可以完成。主线程作为一个线程不能够同时接受多方面的请求。所以当一个事件没有结束时界面将无法处理其他请求。现在有一个按钮如果我们设置它的 onclick 事件为一个死循环那么当这个按钮按下整个网页将失去响应。为了避免这种情况的发生我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限一旦发射了以后就会与主线程失去同步我们无法确定它的结束如果结束之后需要处理一些事情比如处理来自服务器的信息我们是无法将它合并到主线程中去的。为了解决这个问题JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。回调函数回调函数就是一个函数它是在我们启动一个异步任务的时候就告诉它等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了他自己会善始善终。实例function print() { document.getElementById(demo).innerHTMLRUNOOB!; } setTimeout(print, 3000);这段程序中的 setTimeout 就是一个消耗时间较长3 秒的过程它的第一个参数是个回调函数第二个参数是毫秒数这个函数执行之后会产生一个子线程子线程会等待 3 秒然后执行回调函数 print在命令行输出 RUNOOB!。当然JavaScript 语法十分友好我们不必单独定义一个函数 print 我们常常将上面的程序写成实例setTimeout(function () { document.getElementById(demo).innerHTMLRUNOOB!; }, 3000);注意既然 setTimeout 会在子线程中等待 3 秒在 setTimeout 函数执行之后主线程并没有停止所以实例setTimeout(function () { document.getElementById(demo1).innerHTMLRUNOOB-1!; // 三秒后子线程执行 }, 3000); document.getElementById(demo2).innerHTMLRUNOOB-2!; // 主线程先执行这段程序的执行结果是RUNOOB-1! // 三秒后子线程执行 RUNOOB-2! // 主线程先执行异步 AJAX除了 setTimeout 函数以外异步回调广泛应用于 AJAX 编程。有关于 AJAX 详细请参见XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调实例var xhr new XMLHttpRequest(); xhr.onload function () { // 输出接收到的文字数据 document.getElementById(demo).innerHTMLxhr.responseText; } xhr.onerror function () { document.getElementById(demo).innerHTML请求出错; } // 发送异步 GET 请求 xhr.open(GET, https://www.runoob.com/try/ajax/ajax_info.txt, true); xhr.send();XMLHttpRequest 的 onload 和 onerror 属性都是函数分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库也可以更加优雅的使用异步 AJAX实例$.get(https://www.runoob.com/try/ajax/demo_test.php,function(data,status){ alert(数据: data \n状态: status); });❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧