如何使用不断变化的 JavaScript 变量的值动态更新跨度？

Question

我正在开发一个 Javascript 项目，其中有一个变量“completedTasks”，它会因许多事件而动态变化。该变量表示已完成任务的计数。我想在元素中显示其值，并在“completedTasks”更改时自动更新。

<span id="ischeck">Initial Value</span>
<script>
//completedTasks is a variable changing over time due to some events
let completedTasksArray = 0;
//I want the span to display the current value of completed Tasks without explicitly updating it in every part of the code
</script>

Answer 1

Object.defineProperty(globalThis, 'some_value', {
  set(value) {
    console.log('some_value set to: ', value)
  }
});

some_value = 3

//some_value set to:  3

some_value = 2

//some_value set to:  2

如果你的变量是全局的，这确实有效。

Answer 2

您可以使用 @twalow 建议的这个普通 JS 解决方案。

但是如果你想更深入地研究响应式编程，请尝试这个 stackblitz out

片段：

TS：

// Import stylesheets
import { interval, startWith, Subject, tap } from 'rxjs';
import './style.css';

// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');

const subject = new Subject();

subject
  .pipe(
    tap((value) => {
      appDiv.innerHTML = `<h1>TypeScript Starter ${value}</h1>`;
    })
  )
  .subscribe();

/**
 * pretending subject value changes
 */
interval(2000)
  .pipe(
    startWith(-1),
    tap(console.log),
    tap((value) => subject.next(value))
  )
  .subscribe();

HTML：

<div id="app"></div>