この記事では、js でのクロージャ パフォーマンスの最適化に関するコード分析を紹介します。必要な方は参考にしていただければ幸いです。
window.onload=function () {
var btn=document.getElementsByTagName('button');
for(var i=0;i<btn.length;i++){
(function (index) {
btn[index].onclick=function () {
//类似css中的ul:hover li
for(var j=0;j<btn.length;j++){
btn[j].style.backgroundColor='';//清空全部
}
//类似css中的ul>li:hover
this.style.backgroundColor='orange';//设置当前的
}
})(i);
}
}
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>パフォーマンスの最適化
window.onload = function () {
var btn = document.getElementsByTagName('button');
var lastOne = 0;
for (var i = 0; i < btn.length; i++) {
(function (index) { //index就是i
btn[index].onmouseover=function () {
//清除上一个
btn[lastOne].style.backgroundColor= '';
//设置现在的
this.style.backgroundColor = 'orange';
//赋值上一个
lastOne = index;
};
btn[index].onmouseout=function () {
this.className='';
}
})(i);
}
}
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>関連する推奨事項:
以上がjs でのクロージャーのパフォーマンス最適化のコード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
