我有一个500行的表,每行有大约50个html元素,所以它相当复杂。
在同一个窗口的另一个窗格中,我有一个列表,比如说10个拖放区。
我的表的每一行都具有可拖动属性,因此可以将其拖放到10个拖放区中的一个。
我使用dragenter和dragleave事件来检测拖动悬停在拖放区上的时间,并在光标位于拖放区周围时添加一个简单的边框。
如果我的表少于100行,边框突出显示的速度会非常快。
对于500行,它滞后了很长时间,以至于无法接受。
我不知道为什么表的复杂性(拖放的来源)对dragenter和dragleave事件的性能有直接的影响...
这就像是为表中的每个html元素发送了某种事件!
表是这样的:
<div class="left_pane">
<ul>
<li><div class="dropzone">...</div></li>
<li><div class="dropzone">...</div></li>
...
<li><div class="dropzone">...</div></li>
</ul>
</div>
<div class="right_pane">
<table><tbody>
<tr draggable="true">...</tr>
<tr draggable="true">...</tr>
...
<tr draggable="true">...</tr>
</tbody></table>
</div>
正如您所看到的,我可以从右窗格拖动一个表行,并将其放在左窗格的列表元素上。
JavaScript代码(使用ext-js)如下所示:
init_component: function() {
var left_pane_div = Ext.get(sg_find('div.left_pane',document.body));
var right_pane_div = Ext.get(sg_find('div.righ_pane',document.body));
// the following code is what's used while we hover over
this.add_event(left_pane_div,'dragenter',this.on_document_dragenter);
this.add_event(left_pane_div,'dragleave',this.on_document_dragleave);
...
}
on_document_dragenter: function(ext_e) {
var e = ext_e.browserEvent;
e.preventDefault();
var t = Ext.get(e.target);
if ( !t ) return;
var drop_div = t.findParent('div.dropzone',document.body,true);
if ( drop_div ) {
drop_div.addClass( 'dropover' );
}
},
on_document_dragleave: function(ext_e) {
var e = ext_e.browserEvent;
e.preventDefault();
var t = Ext.get(e.target);
if ( !t ) return;
var drop_div = t.findParent('div.dropzone',document.body,true);
if ( drop_div ) {
drop_div.removeClass( 'dropover' );
}
},
并且我有一些css魔法,当用户将鼠标悬停在某个下拉区域上时,可以将其高亮显示。
同样,如果表的行数超过100行,则会延迟很长时间。
要么是事件泵不能足够快地触发dragenter和dragleave事件,要么是我的左窗格中的dropzone高亮显示不知何故导致了右窗格的表上的一些重绘...
1条答案
按热度按时间ct2axkht1#
使用去抖功能。更多详情:
https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086?gi=73510eb50568