第一种情况,分页的table数据太长的话,用settimeout来push,每120ms就push一条数据
/* first page lazy load,
add a item at each 120ms until it reaches the current pagelenght.*/
const cur = this;
for (let i = 0; i < this.currentComponent.TablePageLength && i < result.Rows.length; i++) {
const item = JSON.parse(JSON.stringify(result.Rows[i]));
setTimeout(() => {
cur.firstInitPage.push(item);
if (i === this.currentComponent.TablePageLength - 1 || i > 20 || i > result.Rows.length - 2) {
cur.table.loadingStatus = true;
}
}, 120 * (i + 1));
}
第二种,hover的时候,出现的div渲染太多导致hover太慢又不能分页
思路:鼠标hover的时候只渲染n条,滚动(不是scoll事件而是wheel事件)的时候重新加载并延迟,hover移出的时候恢复n条并且清除settimeout
清除的时候,用一个数组保存每个timer然后一一清除
<div class=" btn-before option-data"
(mouseenter)="storeMouseenter()"
(mouseleave)="storeLeave()"
id="p-store" >
<ul
id="scrollid"
(mousewheel)="onScroll()"
class="option-list mallcss">
<ng-container
*ngFor="let item of
(this.searchkey === ''?this.tempData:searchitemList);
let i = index">
<li class="checkbox-wrapper"
{....当又2000+条的时候}
</li>
</ng-container>
</ul>
mainDiv = null;
tempData = [];
storeMouseenter() {
this.mainDiv = document.getElementById('scrollid');
this.mainDiv.scrollTop = 0;
this.scollFlage = true;
}
storeLeave() {
this.clearTimer();
this.tempData = this.siteConfig.storeList.slice(0, 13);
}
clearTimer() {
for (let i = 0; i < this.tuttimer.length; i++) {
clearTimeout(this.tuttimer[i]);
}
this.tuttimer = [];
}
scollFlage = true;// only trigger once
tuttimer = [];
onScroll() {
if (this.scollFlage) {
this.scollFlage = false;
const cur = this;
for (let i = 0, j = 14; i < this.siteConfig.storeList.length / 10; i++, j = j + 10) {
const timer = setTimeout(() => {
cur.tempData.push(...this.siteConfig.storeList.slice(j, j + 10));
}, 100 * (i + 1));
this.tuttimer.push(timer);
}
}
}