js 高耗时代码异步处理

今天写一个本地数据简单筛选功能的时候发现循环查询的时候会有明显的卡顿，遂加上loading加载来优化用户体验。可是加上loading加载发现依然会卡顿，调试发现代码执行的时候loading还没来得及开始线程就已卡住了。等循环结束loading才开始，这时候还要你何用啊。。。

well，言归正传

        startLoading();setTimeout(function(){console.log('开始查询');var stepValue = $("#produceStepSelect").val();var statusValue = $("#MachineStatusSelect").val();var timeLenValue = $("#timeLengthInput").val();var resultList = [];//三个条件根据是否输入做对比查询for (var i = 0; i < shiftData.length; i++) {var info = shiftData[i];var lenArr = info.timeLen.split(':');var minLength = parseInt(lenArr[0]) * 60 + parseInt(lenArr[1]) + (parseInt(lenArr[2]) == 0 ? 0 : 1);var flag1 = statusValue.length == 0 ? true : (info.status == statusValue);var flag2 = stepValue.length == 0 ? true : (info.textCode == stepValue);var flag3 = timeLenValue == 0 ? true : (minLength > parseInt(timeLenValue));if (flag1 && flag2 && flag3) {resultList.push(info);}}currentShiftList = resultList;shiftCommitList = [];//清空历史操作数组setUpStatusTable(resultList);},0);

setTimeout利用的是浏览器给js开辟新线程的方式，在规定时间之后将预定任务加入到js线程中执行，并且会排在当前js任务之后执行。

所以不需要给延迟时间，只需要把耗时任务放在timeout里面，它就会乖乖等loading开始之后才会执行内部的耗时代码了。

js 高耗时代码异步处理相关推荐

20230503 Javascript下载页面pdf的高质量代码
目录一. 前言二.高质量代码的特征三.编程实践四. 实际代码五. 总结你是否曾经为自己写的代码而感到懊恼?你是否想过如何才能写出高质量代码?那就不要错过这个话题!在这里,我们可以讨论什么是 ...
Vue.js高仿饿了么外卖App学习记录
(给达达前端加星标,提升前端技能) 开发一款vue.js开发一款app,使用vue.js是一款高效的mvvm框架,它轻量,高效,组件化,数据驱动等功能便于开发.使用vue.js开发移动端app,学会使 ...
可视化高并发，高处理任务异步编排设计
可视化高并发,高处理任务异步编排设计在我们系统应用中,如首页,商品详情页,活动页等承载大流量的系统,通常是在web门面系统中对各系统的数据进行聚合,比如依赖服务调用,缓存,数据库调用等:往往这些依赖 ...
写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢添加评论分享按投票 ...
Java线程池源码解析及高质量代码案例
引言本文为Java高级编程中的一些知识总结,其中第一章对Jdk 1.7.0_25中的多线程架构中的线程池ThreadPoolExecutor源码进行架构原理介绍以及源码解析.第二章则分析了几个违反J ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
写出高质量代码的10个Tips
7 条写作原则如下: 让段落成为写作的基本单位,每个段落只说 1 件事情: 省略不必要的词语: 使用主动式: 避免连串的松散句子: 把相关内容放在一起: 多用肯定语句: 善用平行结构: 对应的,在编码 ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
编写高质量代码改善C#程序的157个建议——建议86：Parallel中的异常处理
建议86:Parallel中的异常处理建议85阐述了如何处理Task中的异常.由于Task的Start方法是异步启动的,所以我们需要额外的技术来完成异常处理.Parallel相对来说就要简单很多,因 ...

js 高耗时代码异步处理

js 高耗时代码异步处理相关推荐

最新文章

热门文章