как передать правильный контекст в settimeout на примере javascript

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Проблема часто возникает, когда используется this внутри функции, которая передается в setTimeout. При этом контекст выполнения функции setTimeout() отличается от контекста выполнения переданной функции. В результате this уже не ссылается на ожидаемый объект или элемент.

Для передачи правильного контекста в setTimeout() есть несколько способов:

1. Использование стрелочных функций:

class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    setTimeout(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}

const timer = new Timer();
timer.start();

2. Использование метода `bind`:

class Timer {
  constructor() {
    this.seconds = 0;
  }

  increment() {
    this.seconds++;
    console.log(this.seconds);
  }

  start() {
    setTimeout(this.increment.bind(this), 1000);
  }
}

const timer = new Timer();
timer.start();

3. Использование замыканий:

class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    const that = this;
    function increment() {
      that.seconds++;
      console.log(that.seconds);
    }

    setTimeout(increment, 1000);
  }
}

const timer = new Timer();
timer.start();

Какой из способов использовать, зависит от вашего стиля кодирования и предпочтения. Однако, стрелочные функции стали предпочтительным способом в современном коде JavaScript, так как они автоматически захватывают контекст выполнения.

5 месяцев назад

Maksim Litvinov

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

Похожие вопросы

как передать правильный контекст в settimeout на примере javascript

Ответы

1. Использование стрелочных функций:

2. Использование метода bind:

3. Использование замыканий:

2. Использование метода `bind`: