踩坑——js闭包造成的问题

2016-10-30 本文已影响1116人 webCoder

由于这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。

希望看到这篇文章能对你有用~

踩坑——js闭包造成的问题

猜你喜欢

热点阅读