Почему не работает clearTimeout?

Question

[Николай]

Казалось бы все ок, в месте вызова this._timeoutId актуальный, но таймер не замолкает при вызове disable...

import { injectable } from 'inversify';
import { TimerCallback, ITimer, DelayCalculator } from '../types/timer';

@injectable()
export default class Timer implements ITimer {
    private _startDelay: number;
    private _timeoutId: number;

    constructor(
        private _delay: number,
        private _nextDelay: DelayCalculator,
        private _callback?: TimerCallback,
    ) {
        this._startDelay = _delay;
    }

    public setCallback = (callback: TimerCallback): void => {
        this._callback = callback;
    }

    public enable = (): void => {
        if (!this._callback) {
            throw Error('Callback is required for the Timer!');
        }

        this._tick();
    }

    public disable = (): void => {
        if (!this._timeoutId) {
            console.warn('You trying to disable timer which is not enabled.');
            return;
        }
        clearTimeout(this._timeoutId);
        delete this._timeoutId;
    }

    public reset = (): void => {
        this._delay = this._startDelay;
    }

    private _tick = (): void => {
        this._timeoutId = setTimeout(() => {
            this._callback();
            this._delay = this._nextDelay(this._delay);
            this._tick();
        }, this._delay);
    }
}

Comments

[Антон Швец]

первая мысль - в конструкторе напиши что-нибудь в консоль и проверь тот ли ты экземпляр класса берешь

[Николай]

Антон Швец, Экземпляр класса точно тот, проверил

Answer 1

[Роман Петерсон]

Тоже не могу понять, но у меня какие-то смутные сомнения из-за ваших стрелочных функций в качестве членов класса, хотя вроде это вполне законно. А если потрейсить this._timeoutId перед clearTimeout(this._timeoutId); ? Вдруг он null?

Comments

[Николай]

Не, он точно число, и оно совпадает в обоих методах. Лямбды по сути являются свойствами класса, но это же и лучше, т.к. они наверняка замыкают контекст. Вопрос только остается в том, что, как мне кажется, есть какая-то загвоздка в реализации setTimeout/clearTimeout etc. в React Native + не смог найти ни одного примера применения вне компонент в статьях и к тому же там оказались странные загвоздки в этих кейсах, так что буду смотреть реализацию либ с таймерами

Answer 2

[Николай]

Почему так происходит я не разобрался, но решением стало изменение подхода. Заюзал асинхронщину)

export function delay<T>(ms: number, value?: T): Promise<T> {
    return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

import { injectable } from 'inversify';
import { TimerCallback, ITimer, DelayCalculator } from '../types/timer';
import { delay } from '../../../helpers/delay';

@injectable()
export default class Timer implements ITimer {
    private readonly _startDelay: number;
    private _enable: boolean;
    private counter: number = 0;

    constructor(
        private _delay: number,
        private _nextDelay: DelayCalculator,
        private _callback?: TimerCallback,
    ) {
        this._startDelay = _delay;
    }

    public setCallback = (callback: TimerCallback): void => {
        this._callback = callback;
    }

    public enable = (): void => {
        if (!this._callback) {
            throw Error('Callback is required for the Timer!');
        }

        this._enable = true;
        this._tick();
    }

    public disable = (): void => {
        if (!this._enable) {
            console.warn('You trying to disable timer which is not enabled.');
            return;
        }
        this._enable = false;
    }

    public reset = (): void => {
        this.disable();
        this._delay = this._startDelay;
    }

    private _tick = async (): Promise<void> => {
        await delay(this._delay);
        if (this._enable) {
            this._callback();
            this._delay = this._nextDelay(this._delay);
            await this._tick();
        }
    }
}