由于這3個月工作忙，好久沒有在簡書上寫文章了，今天給大家分享一個我在項目中遇到的js閉包的坑。
- 踩坑背景
在公司的觸屏端項目中，用的react+redux，我們的方法都是統一在params.js中傳遞給對應的組件。我現在有一個需求：列表頁滑到底部，需要重新請求接口，請求接口時需要把上一次接口返回的數據總數這個字段傳給接口，即：
假設我有一個變量totalNum，用于保存每一次接口返回的數據總數；
$.ajax({
url: '.../orders/my',
data: {
num: totalNum,
...
},
type: 'get',
cache: false
});
在實際的項目中，我定義了一個reducer變量用于保存這個數據總數，在接口的成功回調函數中，會修改這個reducer。我天真的以為：
我一開始在state中取到的這個reducer數據（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中，定時器執行完 totalNum = 5后，這個時候會彈出什么結果呢？ 答案還是1，不是5。
希望看到這篇文章能對你有用~
