Question

我正在尝试制作一个在计时器上执行方法的jQuery插件。我希望它能独立地处理页面上的多个元素。我已达到计时器为每个元素执行的点，但是setTimeout中调用的方法似乎只知道插件的最后一个实例。

我知道我在这里做了一些根本愚蠢的事情，但如果我知道什么，我就会感到危险。我知道这样的事情之前已被问过800万次，但我找不到与我的具体问题有关的答案。

这是一个演示我正在做的结构的脚本。

<html>
<head>
<script type="text/javascript" src="assets/jquery.min.js"></script>
<script type="text/javascript">
var crap = 0;
(function($) 
{
    jQuery.fn.pants = function(options) {
        var trousers = {
            id: null,
            current: 0,
            waitTimeMs: 1000,

            begin: function() {
                var d = new Date();
                this.id = crap++;
                console.log(this.id);
                // do a bunch of stuff
                window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs);
            },

            next: function() {
                this.current ++;
                console.log(this.id);
                window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs);
            },
        };

        options = options || {};
        $.extend(trousers, options);

        this.each(function(index, element) {
            trousers.begin();
        });

        return this;
    };
}
)(jQuery);
jQuery(document).ready(function() {
    jQuery("div.wahey").pants();
});
</script>
</head>
<body>
<div class="wahey"></div>
<div class="wahey"></div>
</body>
</html>

我得到的输出是：

我期望获得的输出是：

Answer 1

可能是您使用的是“此”，这是特定于浏览器的，并不总是point to what you want it to point to。这属于函数的所有者，而不是函数的对象。

对象和setTimeout的Javascript范围问题

1 个答案: