javascript-patterns/jquery-patterns/window-scroll-event.html at cn · Pythoning/javascript-patterns · GitHub

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
<!doctype html>
<html lang="en">
<head>
<title>JavaScript 模式和反模式</title>
<meta charset="utf-8">
</head>
<body>
<script>
	/* 题目: 窗口滚动事件
	 * 描述: 不要在窗口滚动事件上附加事件处理程序
	 */

	// 反模式
	$(window).scroll(function () {
		$('.foo').something();
	});


	// 模式 1
	// 用 setInterval 检查你的页面中的位置，再执行命令
	var outerPane = $details.find(".details-pane-outer"),
			didScroll = false;
	$(window).scroll(function () {
		didScroll = true;
	});

	setInterval(function () {
		if (didScroll) {
			didScroll = false;
			// Load in more results
			// outerPane.html();
		}
	}, 250);


	// 模式 2
	// 避免定期的执行，而只在滚动时执行
	var scrollTimeout;  // global for any pending scrollTimeout
	var outerPane = $details.find(".details-pane-outer");

	$(window).scroll(function () {
		if (scrollTimeout) {
			// clear the timeout, if one is pending
			clearTimeout(scrollTimeout);
			scrollTimeout = null;
		}
		scrollTimeout = setTimeout(scrollHandler, 250);
	});

	scrollHandler = function () {
		// Check your page position and then
		// Load in more results
		// outerPane.html();
	};


	// 参考
	// http://ejohn.org/blog/learning-from-twitter/
</script>
</body>
</html>