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开始之后才会执行内部的耗时代码了。