this.method 不适用于 setInterval [英] this.method Is not function with setInterval

问题描述

我有这个简单的代码:

var Modules = (function() {'使用严格';返回 {定时器:函数(){var timer = null;返回 {时间:100，初始化:函数(){this.counter();this.timer = window.setInterval(this.counter, 1000);},计数器:函数(){这一次 -= 1;如果(这个时间<= 0){window.clearInterval(this.timer);alert('时间已过');}console.log(this.time);this.viewer();},查看器:函数(){document.getElementById('timer').innerHTML = this.time;}}}};}());Modules.TIMER().init();

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

出了点问题，因为我有 2 个错误:

<块引用>

this.viewer 不是函数

和

<块引用>

此时的 NaN

我的设计模式在区间上运行有什么问题?

扩展 TIMER 后重置方法:

重置:函数(){这个时间 = 100;}

并在外面称它为:Modules.TIMER().reset(); ?

我得到了

<块引用>

this.time 未定义

.

或者在init里面:

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

我有错误:

<块引用>

this.reset() 不是 s 函数.

解决方案

您的问题来自这一行:

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

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

<小时>

方案A:使用.bind(this)将词法this绑定到回调

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

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

var Modules = (function() {'使用严格';返回 {定时器:函数(){var timer = null;返回 {时间:100，初始化:函数(){this.counter();this.timer = window.setInterval(this.counter.bind(this), 1000);},计数器:函数(){这一次 -= 1;如果(这个时间<= 0){window.clearInterval(this.timer);alert('时间已过');}console.log(this.time);this.viewer();},查看器:函数(){document.getElementById('timer').innerHTML = this.time;}}}};}());Modules.TIMER().init();

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

<小时>

方案B:在setInterval回调

中使用ES6箭头函数

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

另一种选择是在 setInterval 的回调中使用箭头函数，而不是直接将 this.counter 函数指定为回调:

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

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

var Modules = (function() {'使用严格';返回 {定时器:函数(){var timer = null;返回 {时间:100，初始化:函数(){this.counter();this.timer = window.setInterval(() => this.counter(), 1000);},计数器:函数(){这一次 -= 1;如果(这个时间<= 0){window.clearInterval(this.timer);alert('时间已过');}console.log(this.time);this.viewer();},查看器:函数(){document.getElementById('timer').innerHTML = this.time;}}}};}());Modules.TIMER().init();

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

I have this simple code:

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>

And something is wrong because I got 2 errors:

this.viewer is not a function

and

NaN of this.time

What it wrong with my design pattern running over interval?

After extend TIMER to reset method:

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

and call it outside as: Modules.TIMER().reset(); ?

I got

this.time is not defined

.

Or inside init:

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

I got error:

this.reset() is not s function.

解决方案

Your issue is coming from this line:

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

When you are invoking the callback in the setInterval method, the this in the callback function no longer refers to your TIMER object, but the window.

---

Solution A: Use .bind(this) to bind lexical this to callback

You will need to bind the current context to the callback:

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>

---

Solution B: Use ES6 arrow function in setInterval callback

Note: Personally, I prefer this solution because it uses ES6, but if you are still supporting legacy browsers and do not want to transpile your JS, this might not be the best solution.

Another alternative will be using an arrow function in the callback of setInterval, instead of assigning the this.counter function as the callback directly:

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

The arrow function preserves the lexical this, so when this.counter() is invoked it will be using the same context, i.e. the internal this will be referencing your 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>

这篇关于this.method 不适用于 setInterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！