使用间隔时 JQuery-UI Widget 未定义

Question

我想创建一个 Jquery UI 小部件，它在创建时启动一个间隔。每个间隔超时调用的函数应该是可重写的，因此放置在 options 对象中。

我可以从小部件外部启动间隔，并且可以从小部件外部调用可重写函数。但当间隔尝试调用可重写函数时，它是未定义。

这是我的小部件:

jQuery.widget("awesome.me", {
    options: {
        verbose:false,                        // just some setting
        onTimeOut: function(){                // this is the function that is called by the timeout and that should be overrideable 
            console.log("on timeOut called");
        }
    },
    _create: function(){
        console.log(this.options);            // logging the options object
    }, 
    _members: {                               // a private object to hold internal settings and stuff, for example the interval instance
        interval: null
    },
    start: function(){        
        this._members.interval = setInterval(this.doIt, 2000);
    },
    stop: function(){
        clearInterval(this._members.interval);
    },
    doIt: function(){
        console.log(this.options);            // here I would like to call my onTimeOut function, but the options are undefined, because THIS is undefined
    }
});

从外部，在脚本中我这样做是为了实例化我的小部件并开始间隔:

$(document).me();                              // I am not overriding the function for now
var widget = $(document).data("awesome-me");   // to facilitate access to my widget I grab the instance and put it in a normal variable
widget.start();                                // start() will set the interval

如果我在哪里调用widget.doIt()，控制台会显示如下内容:

 Object {classes: Object, disabled: false, create: null, verbose: false}

但是当我运行脚本时，每两秒就会出现一次:

undefined

因此，根据我的理解，当我调用widget.start()时，间隔将开始每2秒调用this.doIt，但在doIt内部 函数，当它尝试记录 options 对象时，它就消失了。所以我的 widget 变量仍然具有我的小部件的正确实例，我可以调用我想要的每个函数。但是当间隔超时时，它会保存一些其他小部件实例，其中函数 doIt 存在，但 this 未定义。

我不明白的是:为什么？我该如何解决这个问题？

Answer 1

问题在于 this._members.interval = setInterval(this.doIt, 2000);

当调用 this.doIt 时，调用时 this 是 window，而它实际上是 window。 options 正在 doIt 中访问(执行 console.log(this) 来查看它在 doIt 中的内容已运行)。

修复方法是通过 this 绑定(bind)或执行 doIt。

this._members.interval = setInterval(this.doIt.bind(this), 2000);

或

var self = this;
this._members.interval = setInterval(function(){self.doIt();}, 2000);