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

Question

Maksim Litvinov · Accepted Answer

Проблема часто возникает, когда используется `this` внутри функции, которая передается в `setTimeout`. При этом контекст выполнения функции `setTimeout()` отличается от контекста выполнения переданной функции. В результате `this` уже не ссылается на ожидаемый объект или элемент.

Для передачи правильного контекста в `setTimeout()` есть несколько способов:

### 1. Использование стрелочных функций:
```javascript
class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    setTimeout(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}

const timer = new Timer();
timer.start();
```

### 2. Использование метода `bind`:
```javascript
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. Использование замыканий:
```javascript
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, так как они автоматически захватывают контекст выполнения.

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

Ответы

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

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

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

Каталог

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

Ответы

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

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

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

Каталог

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