近期做的項目中遇到一些棘手的問題，解決的過程用到很多知識，在此記下主要的問題與解決方法。

頁面功能介紹：獲取五張表格的大量數據（大概有幾千條記錄），然后到前臺顯示在table里面，實現行列匯總。頁面保存也是要保存這些數據的（幾千條）。大概有三個如下的表格保存著大量數據：

1.頁面大量計算的解決方案

如果原來頁面有默認值，要顯示默認值，并且要顯示行列匯總。數據少的時候，在前臺直接使用jQuery的trigger觸發計算是完全可行的，但是數據量稍微多一點，頁面就會卡死甚至瀏覽器會崩潰。所以我采用的解決方案是在前臺計算行列的匯總值展示，不用trigger的方式。這里我采用了webworker。

使用方法如下：

var worker = new Worker("${base.contextPath}/resources/js/cal_job.js");//給異步計算傳遞參數worker.postMessage(info);//接收到計算后的值的回調worker.onmessage = function (evt) {//evt.data就是worker計算后的返回數據vm.sumData = evt.data;}
在計算的cal_job.js里面：

onmessage = function (evt) {//前面傳過來的參數(info)var calcData = evt.data;//自己的計算//......//將計算結果的數據發送回主線程postMessage({name:'value'}); }
這樣在主頁面拿到計算后的行列匯總值，直接$(element).text(‘xxx’)就可以了。

2.同時調用幾個保存接口，都是異步的，如何保證全部保存完后再執行相應的方法

頁面涉及到五張表的數據保存，為了提高效率，將這五個實體的保存分別放到各自對應的controller中，然后異步保存。保存之前會有一個layer的loading圖表，保存結束后這個圖標要消失。這就要涉及捕獲全部保存后的時刻了。有一個簡單的方法，是采用計數的方式，即先定義一個標記變量=0，在每一個保存成功的回調里面給這個變量+1，然后判斷這個變量的值，如果等于5的話就關閉loading的圖標。我沒采用這種方法，因為比較笨拙。我選擇的是Promise對象的all方法。由于Promise在IE上兼容有些問題，可以參考下面第四條。

layer.msg('數據保存中...', {icon: 16, time: 0});var promises = [this.saveRe(), this.savePat(), this.saveTrn(), this.saveFB(), this.saveOutsource()];/***把所有的異步請求封裝成一個promise對象，針對這個promise進行監聽回調，可以保證在保存完成后跳轉頁面***/Promise.all(promises).then(function (data) {layer.closeAll();}).catch(function () {layer.alert('保存出錯');})

3.jQuery事件觸發完成后執行某個方法

如果要在trigger('change')之后執行某一方法，要使用Deferred對象來完成。比如我在整個表格都觸發了change事件之后，再反轉某個標志位，就可以就可以這樣做：

vm.isInit = true;var df = $.Deferred();//獲取要進行change的行var $rows = $('#pat-scroll-tr-0').find('input');//定義一個方法任務var serviceTask = function (dtd) {//在這里觸發change事件$rows.trigger('change');dtd.resolve();return dtd.promise();};//在trigger完成后再執行的操作$.when(serviceTask(df)).done(function () {vm.isInit = false;});

4.Promise對象在頁面無法使用

Promise對象在IE上不兼容，可以使用polyfill進行轉換，簡單的解決方法就是在頁面上引入cdn的polyfill.js就可以了：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

5.layer控件的彈窗顯示小bug

layer控件在火狐上顯示的小問題：

在頁面上加入以下樣式調整即可：

/**解決火狐下的tip顯示的bug*/.custom-padding > .layui-layer-content {padding: 0px;padding-left: 20px;}現在就可以正常渲染了：

轉載于:https://www.cnblogs.com/jerryyj/p/9621563.html

總結

以上是生活随笔為你收集整理的工作笔记一——杂项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。