關於JS的立即執行函式的一處使用場景
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box span{display:inline-block;width: 200px;height:100px;border: 1px solid #ccc} </style> <script> window.onload = function(){ var box = document.getElementById('box'); var divs = document.getElementsByTagName('span'); for (var i = 0, len = divs.length; i < len; i++) { // 為了獲得不同的i值，使用立即呼叫函式 (function(i){ var text = divs[i].innerText; divs[i].onmouseover = function() { console.log('index is :' + text); } })(i); } } </script> </head> <body> <div id='box> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>
上面的程式碼中，JS中如果不適用立即執行函式，當滑鼠劃過span時，看到的都是 4.
使用立即執行函式後，當滑鼠滑過後，看到的就是各自的值了。