在 setTimeout 中调用它答案

【问题标题】：Calling this inside setTimeout在 setTimeout 中调用它
【发布时间】：2016-06-15 08:32:01
【问题描述】：

我正在寻找一种在函数内部正确调用this 的方法，现在我可以快速破解var that = $(this);，但我确信有适当的方法可以做到这一点。我怎样才能避免这种黑客攻击？

这是我用来获取 var 和检查输入间隔的输入字段

<input type="text" data-package="pink" class="js-p-input">

这是我的代码：

var cCalc = (function ($) {
    var s;
    return {
        settings: {
            typingTimer: "",
            doneTypingInterval: 300,
            $inputs: $(".js-p-input"),

        },

        init: function () {
            s = this.settings;
            this.bindUIActions();
        },

        bindUIActions: function () {

            //on keyup, start the countdown
            s.$inputs.on('keyup', function () {
                var that = $(this);                
                clearTimeout(s.typingTimer);               
                s.typingTimer = setTimeout(function() {
                    cCalc.doneTyping(that, that.data("package"));
                }, s.doneTypingInterval);
            });

            s.$inputs.on('keydown', function () {
                clearTimeout(s.typingTimer);
            });

        },


        doneTyping: function ($input, packageName) {
            console.log('done!');
            cCalc.getValues($input.val(), packageName);
        },

    };

})(jQuery);

cCalc.init();

【问题讨论】：

它不适用于$(this)，因为你在setTimeout，所以这个改变了
我认为这是将“this”变量传递给另一个函数的正确方法。类似问题：stackoverflow.com/questions/11366643/…
setTimeout(function() {...}.bind(this), s.doneTypingInterval); 编辑：但是像在代码中那样使用闭包并没有错。其他方式是：setTimeout(cCalc.doneTyping, s.doneTypingInterval, $(this), $(this).data("package")); 甚至传递 $(this).data("package") 似乎是多余的，因为在 doneTyping() 方法中，您可以在不将其作为参数传递的情况下获取数据：$input.data('package')

标签： javascript jquery input timeout

【解决方案1】：

使用那个“hack”没有错，它是标准的操作程序。另请参阅此处What is the difference between call and apply?，了解更多带有标准“this”的“hacky”内容。

【讨论】：

【解决方案2】：

正如其他人指出的那样，使用闭包并没有什么问题，但您也可以像这样将“this”绑定到超时函数范围内：

s.$inputs.on('keyup', function () {

  clearTimeout(s.typingTimer);

  s.typingTimer = setTimeout(function() {

    cCalc.doneTyping($(this), $(this).data("package"));

  }.bind(this), s.doneTypingInterval);

});

【讨论】：