-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathtest.html
82 lines (77 loc) · 3.44 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// // ajax 请求一个路径， success 后将返回的 json 打印到控制台
// $.ajax(function() {
// url: "http://www.weather.com.cn/data/cityinfo/101010100.html",
// data: "http://www.weather.com.cn/data/cityinfo/101010100.html",
// success: function(data) {
// console.log(data);
// },
// error: function(err) {
// console.log(err);
// }
// });//ajax end
// $.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function(_result) {
// if (remote_ip_info.ret == '1') {
// $.ajax({
// type: "GET",
// url: "http://wthrcdn.etouch.cn/weather_mini?city=" + remote_ip_info.city,
// data: "",
// success: function(msg) {
// console.log(msg);
// }
// });
// }
// });
// 关于闭包的理解，再增加一点，典型的如：
// function foo() {
// var a = 0;
// return function() {
// return a++
// }
// }
// var bar = foo();
// bar();
// 上面是一个典型的闭包，因为 bar 的作用于环境是在 window 中，按道理 a 是定义在 foo 函数内部的，当 foo 执行完毕之后，外部是无法获取到 a 的，但是 bar 指向 function() {return a++}，则 bar 就可以调用内部的 a 变量。
// 还有一个典型的闭包，就是遍历一个 nodeList 然后给每一个元素添加一个 eventHandler 函数的时候
// for (var i = 0; i < list.length; i++) {
// list[i] = function() {
// alert(i)
// }
// }
// 这个问题的关键在于，function() {alert(i)} 一直没有执行，JS 中等号是从右向左赋值的，也就是说右侧的内容只是一个静态的，但是左侧的 list[i] 却是一个动态变化的，所以说 list 中的每个 item 都会拥有一个 function() {}，但问题是这个 function是个静态的，所以这个静态的 function 最后弹出的时候就只能是最后的 i 的值，也就是 list.length+1 了
});
</script>
</head>
<body>
<ul id="list">
<li>apple</li>
<li>pear</li>
<li>orange</li>
</ul>
<script type="text/javascript">
window.onload = function() {
var list = document.getElementById('list').getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
(function(j) {
list[j].onclick = function() {
alert(j);
}
})(i)
// 这表示每一个都添加一个 function ，而下面的方式则表示，所有的元素都添加同一个 function，这个 function 内部的 i 是静态的而不是动态的，因为在没有执行的时候，i 只是一个静止的变量而已，并没有去一个一个获取遍历时候的每一个 i
for (var i = 0; i < list.length; i++) {
list[i].onclick = function() {
alert(i)
}
}
}
}
</script>
</body>
</html>