事件相关的优化
大部分的事件触发依赖于用户与浏览器的交互,但用户的行为是不可控的,许多交互设计上的缺陷与无法考虑到的因素会导致事件的频繁触发。
当事件处理器内部包含大量的操作,又不需要如此快速的响应事件时,就需要采用一些手段来限制事件处理器的执行。
事件的优化主要有两个目的:
减少不必要的 HTTP 请求
减少本机性能的消耗
1. 交互设计
通过交互的设计来优化事件是最常用到的方式。
如用户点击删除后将按钮禁止。
实例演示
预览
复制
<style>
.list .item {display: flex;justify-content: space-between;border-bottom: 1px dashed #4caf50;padding: 8px 0;}
.list .item .caption {font-weight: 700;}
.list .item .operates .delete {border: 1px solid rgb(177, 107, 107);color: rgb(207, 72, 72);outline: none;cursor: pointer;}
</style>
<div class="list">
<div class="item">
<div class="content caption">
今天要做的事情
</div>
<div class="operates caption">
操作
</div>
</div>
<div class="item">
<div class="content">
吃火锅
</div>
<div class="operates">
<button class="delete">删除</button>
</div>
</div>
<div class="item">
<div class="content">
和小姐姐聊天
</div>
<div class="operates">
<button class="delete">删除</button>
</div>
</div>
</div>
<script>
var listEle = document.querySelector('.list');
var deleteEle = document.querySelectorAll('.delete');
deleteEle.forEach(function(el) {
el.addEventListener('click', function() {
console.log('开始删除...');
setTimeout(function() {
var itemEl = el.parentNode.parentNode;
listEle.removeChild(itemEl);
console.log('删除成功');
}, 1500);
});
});
</script>
<style>
.list .item {display: flex;justify-content: space-between;border-bottom: 1px dashed #4caf50;padding: 8px 0;}
.list .item .caption {font-weight: 700;}
.list .item .operates .delete {border: 1px solid rgb(177, 107, 107);color: rgb(207, 72, 72);outline: none;cursor: pointer;}
</style>
<div class="list">
<div class="item">
<div class="content caption">
今天要做的事情
</div>
<div class="operates caption">
操作
</div>
</div>
<div class="item">
<div class="content">
吃火锅
</div>
<div class="operates">
<button class="delete">删除</button&