由于這3個月工作忙，好久沒有在簡書上寫文章了吗浩，今天給大家分享一個我在項目中遇到的js閉包的坑建芙。
- 踩坑背景
在公司的觸屏端項目中，用的react+redux拓萌，我們的方法都是統(tǒng)一在params.js中傳遞給對應的組件岁钓。我現(xiàn)在有一個需求：列表頁滑到底部，需要重新請求接口，請求接口時需要把上一次接口返回的數(shù)據(jù)總數(shù)這個字段傳給接口屡限，即：
假設我有一個變量totalNum品嚣，用于保存每一次接口返回的數(shù)據(jù)總數(shù)；
$.ajax({
url: '.../orders/my',
data: {
num: totalNum,
...
},
type: 'get',
cache: false
});
在實際的項目中钧大，我定義了一個reducer變量用于保存這個數(shù)據(jù)總數(shù)翰撑，在接口的成功回調函數(shù)中，會修改這個reducer啊央。我天真的以為：
我一開始在state中取到的這個reducer數(shù)據(jù)（totalNum）眶诈，雖然在window.onscroll中綁定了，但每次scroll時瓜饥，都會重新從state中取最新的totalNum逝撬。
上面的描述可能比較抽象，下面列出了一個很簡單的模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="./jquery.min_44f7138.js"></script>
</head>
<body>
<button class="js-btn">點擊</button>
<script>
var totalNum = 1;
function funClick() {
var totalNum2 = totalNum;
return function() {
$('.js-btn').click(function(){
alert(totalNum2);
});
}
}
setTimeout(function(){
totalNum = 5;
console.log('setTimeout success 1');
},5000);
var param = funClick();
$(function(){
param();
});
</script>
</body>
</html>
上面的這段代碼：
在頁面初始化完成時乓土，點擊按鈕宪潮，這個時候alert出來1，這個大家肯定都沒問題趣苏；
那么狡相，當過了5s中，定時器執(zhí)行完 totalNum = 5后食磕，這個時候會彈出什么結果呢尽棕？ 答案還是1，不是5彬伦。
希望看到這篇文章能對你有用~
