由于这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。
希望看到这篇文章能对你有用~
