首頁  >  文章  >  web前端  >  js中閉包效能最佳化的程式碼解析

js中閉包效能最佳化的程式碼解析

不言
不言原創
2018-08-28 16:32:271412瀏覽

這篇文章帶給大家的內容是關於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=&#39;&#39;;//清空全部
                    }                    
                    //类似css中的ul>li:hover
                    this.style.backgroundColor=&#39;orange&#39;;//设置当前的
                }
            })(i);
        }
    }

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

最佳化效能

    window.onload = function () {
        var btn = document.getElementsByTagName(&#39;button&#39;);        
        var lastOne = 0;        
        for (var i = 0; i < btn.length; i++) {
            (function (index) { //index就是i
                btn[index].onmouseover=function () {
                    //清除上一个
                    btn[lastOne].style.backgroundColor= &#39;&#39;;                    
                    //设置现在的
                    this.style.backgroundColor = &#39;orange&#39;;                    
                    //赋值上一个
                    lastOne = index;
                };
                btn[index].onmouseout=function () {
                    this.className=&#39;&#39;;
                }
            })(i);
        }
    }

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

相關推薦:

#js閉包與prototype

##JS閉套件的使用

以上是js中閉包效能最佳化的程式碼解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn