如何在 javascript 闭包调用中生成动态字符串

Question

我正在创建一长串 select 项，并想创建一个闭包调用来添加每个选项，然后将调用排队（通过 setTimer），这样浏览器就不会挂起。

我的实现效果很好，但令我困惑的是以下代码：

var mainList = $('#mainList');
for (var i=0;i < 100000; i++) {
  var self = mainList, addOption = function() {
    $(self).append('<option value=' + i + '>' + i + '</option>');
   };

  $.queue.add(addOption, this);
}

生成：

<option value='100000'>100000</option>
<option value='100000'>100000</option>
<option value='100000'>100000</option>  etc...

我想让它生成选项的地方：

<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>  etc...

我正在为闭包的执行方式而苦苦挣扎，当 i == 100000 时调用 addOption() 方法是有道理的，但我希望调用能够反映当时 i 的值排队。

这里有我遗漏的简单技巧吗？

Answer 1

通过 IIFE 设置 addOption 其中 returns 一个函数

var mainList = $('#mainList');
for (var i = 0; i < 100000; i++) {
    var self = mainList,
        addOption = (function(i) {
            return function() {
                $(self).append('<option value=' + i + '>' + i + '</option>');
            }
        })(i);
    $.queue.add(addOption, this);
}

Answer 2

在引入 Function.prototype.bind 之前，在这种情况下肯定有必要专门使用闭包来捕获一个或多个变量。

现在，这种方法被认为有点笨拙。

您可以定义一个基本的 addOption 函数，然后在循环中生成它的多个版本，使用 addOption.bind() 将 mainList 绑定为 "thisArg"，并且 i作为第一个形式变量：

var mainList = $('#mainList');
var addOption = function(i) {
    this.append('<option value=' + i + '>' + i + '</option>');
};
for (var i=0; i<100000; i++) {
    $.queue.add(addOption.bind(mainList, i), this);
}

如何在 javascript 闭包调用中生成动态字符串

How to generate dynamic strings in javascript closure call

javascript

jquery

closures