JavaScript:对象问题

JavaScript: problem with object

本文关键字：问题 对象 JavaScript      更新时间：2023-09-26

我正在编写一个小定时器。代码如下:

var counter = {
    seconds: 100,
    clock: function () {
        $('input').val(this.seconds);
        this.seconds -= 1;
        setTimeout(this.clock(), 1000);
    }
};
counter.clock();

和http://jsfiddle.net/4ktEG/

上的工作示例

每次我运行代码，我得到一个不同的答案。有什么问题吗?

这是你正在寻找的倒计时。

var counter = {
    seconds: 100,
    clock: function () {
        $('input').val(this.seconds);
        this.seconds -= 1;
        setTimeout(function(){counter.clock()}, 1000);
    }
};
counter.clock();
http://jsfiddle.net/4ktEG/13/

jQuery有jQuery.proxy() [docs]方法来绑定this的值。

setTimeout($.proxy(counter,'clock'), 1000);

$.proxy将返回一个调用counter.clock的函数，并将counter绑定为this的值。

或者您可以像这样使用它来永久绑定counter和counter.clock:

var counter = {
    seconds: 100
};
counter.clock = $.proxy( function () {
    $('input').val(this.seconds);
    this.seconds -= 1;
    setTimeout(this.clock, 1000);
}, counter);
counter.clock();

例子: http://jsfiddle.net/bmYAN/

如果你想让输入显示"100"，然后在setTimeout被调用时消失，那么你必须去掉this.clock()上的括号"

因此:

var counter = {
seconds: 100,
clock: function () {
    $('input').val(this.seconds);
    this.seconds -= 1;
    setTimeout(this.clock, 1000);
}
};
counter.clock();

当你说

setTimeout(this.clock(), 1000); //the clock method will be called right away.

用这个代替

setTimeout(this.clock, 1000);

使用说明:

var counter = {
    seconds: 100,
    clock: function () {
        $('input').val(counter.seconds);
        counter.seconds -= 1;
        setTimeout(counter.clock, 1000);
    }
};
counter.clock();

你在函数中使用了"this"，你想要的是指向"counter"对象。

超时将在全局上下文中执行。因此，处理程序中的'this'将引用全局上下文。您必须将函数绑定到所需的上下文以实现所需的结果。查看function.call或function.apply，它们接受上下文参数。

var counter = {
    seconds: 100,
    clock: function () {
        $('input').val(this.seconds);
        this.seconds -= 1;
        var closure = function() {
            counter.clock.call(counter);
        };
        setTimeout(closure, 1000);
    }
};
counter.clock();
相关文章：