Pourquoi la variable de cet objet n'est-elle pas modifiée par sa fonction de rappel ?

Question

J'essaie d'amener un objet global à modifier l'une de ses propres variables dans une fonction de rappel initialisée par l'une de ses propres méthodes. La fonction de rappel semble fonctionner, mais la variable ne semble pas avoir été modifiée lors du test de la variable globale.

Pourquoi l'objet global n'est-il pas modifié ? Les modifications apportées à l'objet global sont-elles conservées dans une sorte de zone de transit en attendant l'achèvement de la fonction de rappel ?

let obj;

function test_object_flag() {

    // 5 - check whether the "timer_finished" flag has been set
    console.log("is the timer finished? " + obj.timer_finished);    // should return "true"???

}

class TestClass {

    constructor() {
        this.timer_finished = false;
    }

    start_timer(ptr_callback_function) {

        // 3 - set up a callback for the timer
        setTimeout(function() {

            // 4 - once the timer is done, set a "timer_finished" flag, and call the callback
            this.timer_finished = true;
            ptr_callback_function();

        }, 1000);

    }

}

$( document ).ready(function() {

    // 1 - make a new onbject of type TestClass
    obj = new TestClass();

    // 2 - start the timer 
    obj.start_timer(test_object_flag);

});

Answer 1

Le problème est que setTimeout crée sa propre this . La solution peut ressembler :

start_timer(ptr_callback_function) {
    // savig this that your need
    const self = this;

    setTimeout(function() {
        // use needed context
        self.timer_finished = true;
        ptr_callback_function();
    }, 1000);
}

Une autre option consiste à utiliser les fonctions de flèche :

start_timer(ptr_callback_function) {
    setTimeout(() => {
        this.timer_finished = true;
        ptr_callback_function();
    }, 1000);
}