常遇到的一种闭包情形

1 问题描述

有个问题，想把一个请求，分成多次请求完成。例如，下面的例子中，将一个时间段，拆分成10个小的时间段，分别请求数据。很自然地写出了如下代码：

for (var i = 0; i < 10; i++) {

    var dateRange = {};

    dateRange.start = start + i*deta;
    dateRange.end = start + (i+1)*deta - 1;

    Ext.Ajax.request({
        url: ajax_url,
        params: {
            start: dateRange.start,
            end: dateRange.end,
        },
        success: function (response, options) {

            ...

            // 注意此处用到闭包, i 已经变成最大值了
            conosle.log(i);

        }
    });
}

如上代码，当请求结果出来后，i 的打印值都是为 10，而对于所有用到 i 的地方（比如用来计算时间范围，都是错误的了）。

2 解决办法

2.1 提取参数

这是最直接的办法，参考文献中也提到了这种方式，但他提到了还有其他的方式实现

function requestData(i) {
    var dateRange = {};

    dateRange.start = start + i*deta;
    dateRange.end = start + (i+1)*deta - 1;

    Ext.Ajax.request({
        url: ajax_url,
        params: {
            start: dateRange.start,
            end: dateRange.end,
        },
        success: function (response, options) {

            ...

            conosle.log(i);

        }
    });
}

for (var i = 0; i < 10; i++) {
    requestData(i);
}

2.2 设定 ajax 为同步方式

设定 ajax 请求方式同步（因为 Ext 默认的是异步方式），这样阻塞了循环进行，不会出现对 i 的改写。

    Ext.Ajax.request({
        url: ajax_url,
        // 设定为同步请求方式
        async: false,
        params: {
            start: dateRange.start,
            end: dateRange.end,
        },
        success: function (response, options) {

            ...

3 参考资料

1. javascript闭包(Closure)初探

提到了闭包的基本概念(内部函数块引用外部块的变量)，闭包问题描述及解决办法：创建函数，传递参数。与现场中的类似。

2. ExtJs4 笔记（3） Ext.Ajax 对ajax的支持

提到了 ExtJS 中 ajax 请求函数说明