Bagaimana untuk Mengekalkan Rujukan \"ini\" Apabila Menggunakan setTimeout dalam JavaScript?

setTimeout dan Sukar "ini" dalam JavaScript

Apabila menggunakan fungsi setTimeout, pembangun sering menghadapi masalah di mana panggilan berikutnya ke kaedah hilang konteks yang dimaksudkan, menghasilkan kaedah yang kelihatan tidak jelas. Ini biasanya disebabkan oleh kehilangan rujukan "ini".

Masalahnya:

Pertimbangkan kod berikut:

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};

Hidup pemuatan halaman awal, fungsi method2 berfungsi seperti yang dimaksudkan. Walau bagaimanapun, selepas menetapkan tamat masa, panggilan seterusnya ke method2 mengakibatkan ralat yang menunjukkan bahawa ia tidak ditentukan.

Penyelesaian:

Isu teras terletak pada cara setTimeout mengendalikan kata kunci ini. Apabila menetapkan tamat masa menggunakan setTimeout(this.method, 5000), konteks hilang, mengakibatkan ralat.

Penyelesaian bijak untuk masalah ini ialah menggunakan kaedah bind(). Dengan menambahkan ".bind(this)" pada penghujung panggilan kaedah, konteks boleh diikat secara eksplisit, memastikan bahawa rujukan "ini" yang betul dikekalkan walaupun selepas tamat masa.

Kod yang Diperbaiki :

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

Dengan pengubahsuaian ini, konteks "ini" diikat dengan betul, membolehkan kaedah2 terus berfungsi seperti yang dimaksudkan selepas tamat masa tamat. Pendekatan ini elegan dan berkesan dalam mengekalkan konteks pelaksanaan yang betul.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Rujukan \"ini\" Apabila Menggunakan setTimeout dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!