this.method 不是 setInterval 的函数 [重复]

2023-12-14

我有这个简单的代码：

var Modules = (function() {
    'use strict';

    return {
        
        TIMER: function (){
            var timer = null;
            
            return {
                time: 100,
                init: function() {
   
                    this.counter();
                    this.timer = window.setInterval(this.counter, 1000);
                },
                counter: function() {
                    this.time -= 1;

                    if (this.time <= 0) {
                        window.clearInterval(this.timer);
                        alert('Time expired');
                    }
                    console.log(this.time);
                    this.viewer();
                    
                },
                viewer: function() {
                    document.getElementById('timer').innerHTML = this.time;
                }
            }
        }
    };
}());

Modules.TIMER().init();

<div id="timer"></div>

出了点问题，因为我有两个错误：

this.viewer 不是一个函数

and

这次的 NaN

我的设计模式超出间隔运行有什么问题？

扩展TIMER后重置方法：

reset: function() {
                    this.time = 100;
                }

并在外部调用它：Modules.TIMER().reset(); ?

I got

this.time 未定义

或者在 init 内部：

jQuery("body").on('keyup mouseup', function (e) {
                        this.reset();
                    });

我收到错误：

this.reset() 不是函数。

您的问题来自这一行：

this.timer = window.setInterval(this.counter, 1000);

当您在调用回调时setInterval方法，将this回调函数中不再引用您的TIMER对象，但是window.

解决方案A：使用`.bind(this)`绑定词汇`this`回调

您需要将当前上下文绑定到回调：

this.timer = window.setInterval(this.counter.bind(this), 1000);

var Modules = (function() {
    'use strict';

    return {
        
        TIMER: function (){
            var timer = null;
            
            return {
                time: 100,
                init: function() {
   
                    this.counter();
                    this.timer = window.setInterval(this.counter.bind(this), 1000);
                },
                counter: function() {
                    this.time -= 1;

                    if (this.time <= 0) {
                        window.clearInterval(this.timer);
                        alert('Time expired');
                    }
                    console.log(this.time);
                    this.viewer();
                    
                },
                viewer: function() {
                    document.getElementById('timer').innerHTML = this.time;
                }
            }
        }
    };
}());

Modules.TIMER().init();

<div id="timer"></div>

解决方案B：使用ES6箭头函数`setInterval`打回来

注意：就我个人而言，我更喜欢这个解决方案，因为它使用 ES6，但如果您仍然支持旧版浏览器并且不想转译 JS，这可能不是最好的解决方案。

另一种选择是在回调中使用箭头函数setInterval，而不是分配this.counter直接作为回调函数：

this.timer = window.setInterval(() => this.counter(), 1000);

箭头函数保留了词法this，所以当this.counter()被调用时它将使用相同的上下文，即内部this将引用您的TIMER object.

var Modules = (function() {
    'use strict';

    return {
        
        TIMER: function (){
            var timer = null;
            
            return {
                time: 100,
                init: function() {
   
                    this.counter();
                    this.timer = window.setInterval(() => this.counter(), 1000);
                },
                counter: function() {
                    this.time -= 1;

                    if (this.time <= 0) {
                        window.clearInterval(this.timer);
                        alert('Time expired');
                    }
                    console.log(this.time);
                    this.viewer();
                    
                },
                viewer: function() {
                    document.getElementById('timer').innerHTML = this.time;
                }
            }
        }
    };
}());

Modules.TIMER().init();

<div id="timer"></div>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

setInterval