javascript - JavascriptsetIntervalと`this`ソリューション

Question

ハンドラーthisからアクセスする必要がありますsetInterval

prefs: null,
startup : function()
    {
        // init prefs
        ...
        this.retrieve_rate();
        this.intervalID = setInterval(this.retrieve_rate, this.INTERVAL);
    },

retrieve_rate : function()
    {
        var ajax = null;
        ajax = new XMLHttpRequest();
        ajax.open('GET', 'http://xyz.com', true);
        ajax.onload = function()
        {
            // access prefs here
        }
    }

でthis.prefsにアクセスするにはどうすればよいajax.onloadですか？

score 104 · Accepted Answer

104

this.intervalID = setInterval(this.retrieve_rate.bind(this), this.INTERVAL);

于 2014-02-11T20:24:17.180 に答える

score 94 · Accepted Answer

setInterval行は次のようになります。-

 this.intervalID = setInterval(
     (function(self) {         //Self-executing func which takes 'this' as self
         return function() {   //Return a function in the context of 'self'
             self.retrieve_rate(); //Thing you wanted to run as non-window 'this'
         }
     })(this),
     this.INTERVAL     //normal interval, 'this' scope not impacted here.
 );

編集：同じ原則が「」にも当てはまりますonload。この場合、「外部」コードがほとんど何もしないのが一般的であり、リクエストを設定してから送信するだけです。この場合、上記のコードのような追加のオーバーヘッドは不要です。あなたのretrieve_rateは次のようになります：-

retrieve_rate : function()
{
    var self = this;
    var ajax = new XMLHttpRequest();
    ajax.open('GET', 'http://xyz.com', true);
    ajax.onreadystatechanged= function()
    {
        if (ajax.readyState == 4 && ajax.status == 200)
        {
            // prefs available as self.prefs
        }
    }
    ajax.send(null);
}

score 19 · Accepted Answer

のデフォルトの動作はsetInterval、グローバルコンテキストにバインドすることです。現在のコンテキストのコピーを保存することにより、メンバー関数を呼び出すことができます。retrieve_rate内で、this変数は元のコンテキストに正しくバインドされます。コードは次のようになります。

var self = this;
this.intervalID = setInterval(
    function() { self.retrieve_rate(); },
    this.INTERVAL);

ボーナスのヒント:(メンバー関数を持つオブジェクト参照とは対照的に）プレーンな関数参照の場合、JavaScriptcallまたはapplyメソッドを使用してコンテキストを変更できます。

score 14 · Accepted Answer

ブラウザのサポートが改善されたことで、EcmaScript 6の拡張機能であるarrow=>メソッドを使用して、適切に保存できるようになりthisました。

startup : function()
    {
        // init prefs
        ...
        this.retrieve_rate();
        this.intervalID = setInterval( () => this.retrieve_rate(), this.INTERVAL);
    },

=>メソッドを使用すると、間隔によって呼び出されたthisときが保持されます。retrieve_rate()ファンキーな自己やthisパラメータを渡す必要はありません

score 10 · Accepted Answer

window.setInterval(function(){console.log(this)}.bind(this), 100)

これはjavascriptで合法であり、多くのコードを節約します:)

score 3 · Accepted Answer

ほとんどの場合、連続するメソッド呼び出しでこのコンテキストを実際に切り替えたいので、これが最もクリーンなソリューションになります。

また、の概念を理解しやすくなります。

    // store scope reference for our delegating method
    var that = this;
    setInterval(function() {
        // this would be changed here because of method scope, 
        // but we still have a reference to that
        OURMETHODNAME.call(that);
    }, 200);

score 2 · Accepted Answer

最新のブラウザでは、setIntervalメソッドを使用すると、タイマーの期限が切れると、funcで指定された関数に渡される追加のパラメータを使用できます。

var intervalID = scope.setInterval（func、delay [、param1、param2、...]）;

したがって、考えられる解決策は次のとおりです。

this.intervalID = setInterval(function (self) {
        self.retrieve_rate();
    }, this.INTERVAL, this);

デモ：

var timerId;
document.querySelector('#clickMe').addEventListener('click', function(e) {
    timerId = setInterval(function (self) {
        self.textContent = self.textContent.slice(0, -1);
        if (self.textContent.length == 0) {
            clearInterval(timerId);
            self.textContent = 'end..';
        }
    }, 250, this);
})

<button id="clickMe">ClickMe</button>

score 0 · Accepted Answer

prefs: null,
startup : function()
    {
        // init prefs
        ...
        this.retrieve_rate();
        var context = this;
        this.intervalID = setInterval(function()
                                      {
                                          context.retrieve_rate();
                                      }, this.INTERVAL);
    },

retrieve_rate : function()
    {
        var ajax = null;
        ajax = new XMLHttpRequest();
        ajax.open('GET', 'http://xyz.com', true);
        var context = this;
        ajax.onload = function()
        {
            // access prefs using context.
            // e.g. context.prefs
        }
    }

score -1 · Accepted Answer

これは美容ソリューションではありませんが、一般的な使用法です。

var self = this;
var ajax = null;
//...
ajax.onload = function() {
    self.prefs....;
}

javascript - JavascriptsetIntervalと`this`ソリューション

9 に答える 9

Related

Reference