Как отследить изменение значения переменной в JavaScript?

Оффтоп javascript
1

Привет, ребята! Столкнулся с проблемой в своем JavaScript-коде. Мне нужно как-то узнавать, когда пользователь меняет значение переменной. Например, если он нажимает кнопку, которая увеличивает значение на 1.

Сейчас у меня есть две переменные:

let текущееЗначение = 1;
let предыдущееЗначение = текущееЗначение;

Я пытался сделать что-то вроде этого:

function проверитьИзменения() {
  if (текущееЗначение !== предыдущееЗначение) {
    console.log('Значение изменилось!');
    предыдущееЗначение = текущееЗначение;
  }
}

setInterval(проверитьИзменения, 100);

document.getElementById('кнопка').onclick = function() {
  текущееЗначение++;
}

Но это кажется не очень эффективным. Может, есть способ получше? Буду благодарен за любые идеи!

2

Попробуй использовать Proxy объект, он позволяет перехватывать операции с объектом.

Например:

let handler = {
  set(target, prop, value) {
    console.log(`${prop} изменилось на ${value}`);
    target[prop] = value;
    return true;
  }
};

let obj = new Proxy({счетчик: 0}, handler);

document.getElementById('кнопка').onclick = () => obj.счетчик++;

Так ты сможешь отслеживать изменения без доп. кода в обработчиках событий. Proxy работает асинхронно и эффективнее setInterval.

3

А может попробовать использовать объект с геттером и сеттером? Что-то типа:

let значение = {
_текущее: 1,
get текущее() { return this._текущее; },
set текущее(новое) {
if (новое !== this._текущее) {
console.log(‘Изменилось!’);
this._текущее = новое;
}
}
};

document.getElementById(‘кнопка’).onclick = () => значение.текущее++;

Так будет отслеживаться каждое изменение без постоянных проверок. Как думаешь, подойдет?

4

а вот еще один вариант - можно использовать паттерн observer (наблюдатель). это позволит подписываться на изменения переменной и реагировать на них. примерно так:

class наблюдаемая {
  constructor(значение) {
    this._значение = значение;
    this.наблюдатели = [];
  }
  
  получитьЗначение() {
    return this._значение;
  }
  
  установитьЗначение(новое) {
    if (this._значение !== новое) {
      this._значение = новое;
      this.уведомить();
    }
  }
  
  подписаться(функция) {
    this.наблюдатели.push(функция);
  }
  
  уведомить() {
    this.наблюдатели.forEach(ф => ф(this._значение));
  }
}

так можно отслеживать изменения и выполнять нужные действия при этом. гибко и масштабируемо.