81

我正在使用 Twitter 的 Typeahead。我遇到了来自 Intellij 的警告。这导致每个链接的“window.location.href”成为我的项目列表中的最后一项。

如何修复我的代码？

下面是我的代码：

AutoSuggest.prototype.config = function () {
    var me = this;
    var comp, options;
    var gotoUrl = "/{0}/{1}";
    var imgurl = '<img src="/icon/{0}.gif"/>';
    var target;

    for (var i = 0; i < me.targets.length; i++) {
        target = me.targets[i];
        if ($("#" + target.inputId).length != 0) {
            options = {
                source: function (query, process) { // where to get the data
                    process(me.results);
                },

                // set max results to display
                items: 10,

                matcher: function (item) { // how to make sure the result select is correct/matching
                    // we check the query against the ticker then the company name
                    comp = me.map[item];
                    var symbol = comp.s.toLowerCase();
                    return (this.query.trim().toLowerCase() == symbol.substring(0, 1) ||
                        comp.c.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1);
                },

                highlighter: function (item) { // how to show the data
                    comp = me.map[item];
                    if (typeof comp === 'undefined') {
                        return "<span>No Match Found.</span>";
                    }

                    if (comp.t == 0) {
                        imgurl = comp.v;
                    } else if (comp.t == -1) {
                        imgurl = me.format(imgurl, "empty");
                    } else {
                        imgurl = me.format(imgurl, comp.t);
                    }

                    return "\n<span id='compVenue'>" + imgurl + "</span>" +
                        "\n<span id='compSymbol'><b>" + comp.s + "</b></span>" +
                        "\n<span id='compName'>" + comp.c + "</span>";
                },

                sorter: function (items) { // sort our results
                    if (items.length == 0) {
                        items.push(Object());
                    }

                    return items;
                },
// the problem starts here when i start using target inside the functions
                updater: function (item) { // what to do when item is selected
                    comp = me.map[item];
                    if (typeof comp === 'undefined') {
                        return this.query;
                    }

                    window.location.href = me.format(gotoUrl, comp.s, target.destination);

                    return item;
                }
            };

            $("#" + target.inputId).typeahead(options);

            // lastly, set up the functions for the buttons
            $("#" + target.buttonId).click(function () {
                window.location.href = me.format(gotoUrl, $("#" + target.inputId).val(), target.destination);
            });
        }
    }
};

在@cdhowie 的帮助下，还有一些代码：我将更新更新程序以及 click() 的 href

updater: (function (inner_target) { // what to do when item is selected
    return function (item) {
        comp = me.map[item];
        if (typeof comp === 'undefined') {
            return this.query;
        }

        window.location.href = me.format(gotoUrl, comp.s, inner_target.destination);
        return item;
}}(target))};
4

5 回答 5

153

我喜欢Javascript Garden中的Closures Inside Loops段落

它解释了三种方法。

在循环中使用闭包的错误方法

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

使用匿名包装器的解决方案 1

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

解决方案 2 - 从闭包返回一个函数

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}

解决方案 3，我最喜欢的，我想我终于明白了bind-耶！绑定FTW！

for(var i = 0; i < 10; i++) {
    setTimeout(console.log.bind(console, i), 1000);
}

我强烈推荐Javascript garden - 它向我展示了这个以及更多的 Javascript 怪癖（让我更喜欢 JS）。

ps 如果你的大脑没有融化，那么你那天没有足够的 Javascript。

于 2014-04-13T02:19:35.287 回答
63

您需要在此处嵌套两个函数，创建一个新的闭包，该闭包在创建闭包时捕获变量的值（而不是变量本身）。您可以使用立即调用的外部函数的参数来执行此操作。替换这个表达式：

function (item) { // what to do when item is selected
    comp = me.map[item];
    if (typeof comp === 'undefined') {
        return this.query;
    }

    window.location.href = me.format(gotoUrl, comp.s, target.destination);

    return item;
}

有了这个：

(function (inner_target) {
    return function (item) { // what to do when item is selected
        comp = me.map[item];
        if (typeof comp === 'undefined') {
            return this.query;
        }

        window.location.href = me.format(gotoUrl, comp.s, inner_target.destination);

        return item;
    }
}(target))

请注意，我们传入target外部函数，它变成了参数inner_target，有效地捕获了target调用外部函数时的值。外部函数返回一个内部函数，它使用inner_target代替target，并且inner_target不会改变。

（请注意，您可以重命名inner_target为target，您会没事的——target将使用最接近的，这将是函数参数。但是，在如此紧凑的范围内有两个同名的变量可能会非常混乱，所以我已经命名在我的示例中它们有所不同，以便您可以看到发生了什么。）

于 2013-05-23T22:02:52.737 回答
11

在 ecmascript 6 中，我们有了新的机会。

let语句声明了一个块范围的局部变量，可选择将其初始化为一个值 。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

于 2016-03-21T12:18:11.447 回答
2

由于 JavaScript 唯一的作用域是函数作用域，因此您可以简单地将闭包移动到您所在作用域之外的外部函数。

于 2016-06-10T11:07:54.990 回答
0

只是为了澄清@BogdanRuzhitskiy 的答案（因为我不知道如何在评论中添加代码），使用 let 的想法是在 for 块内创建一个局部变量：

for(var i = 0; i < 10; i++) {
    let captureI = i;
    setTimeout(function() {
       console.log(captureI);  
    }, 1000);
}

这几乎适用于除 IE11 之外的任何现代浏览器。

于 2019-12-04T23:45:51.483 回答