Интервал установки JS заказ - PullRequest
Новая
       16

Интервал установки JS заказ

0 голосов
/ 05 мая 2020

Я работаю над HTML customlement, но когда я запускаю его в браузере, я получаю очень интересную ошибку. Это код: 

class clock extends HTMLElement {
        constructor() {
            super()
            this.time = new Date(this.getAttribute('time'));
            this.span = document.createElement('span')
            this.appendChild(this.span)
        }

        Timer() {
            let Now = this.time;           
            let Seconds = Now.getSeconds();
            let Minutes = Now.getMinutes();
            let Hours = Now.getHours();  

            Minutes = Minutes < 10 ? "0" + Minutes : Minutes;

            document.getElementById("digitalClock").textContent =  Hours + ":" + Minutes; 
        }

        connectedCallback(){
            this.span.innerHTML = `...<span id="digitalClock"></span>`;
            this.Timer();
            this.myClockTimer = setInterval(this.Timer, 5000);
        }
        disconnectedCallback(){
            clearInterval(this.myClockTimer);
        }

    }
customElements.define('worktime-clock', clock)

Когда я запускаю это, функция Timer работает хорошо при вызове с this.Timer () в функции connectedCallback, но через одну строку, когда она попадает в цикл, она говорит, что сейчас не определено в функции таймера. Похоже, что есть проблема с ее вызовом в setinterval, однако функция определенно запускается снова и снова, как и ожидалось. Кто-нибудь знает, в чем проблема?

Ответы [ 2 ]

1 голос
/ 05 мая 2020

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

this.myClockTimer = setInterval(this.Timer.bind(this), 5000);

Это выполняет то же самое: 

var that = this;
this.myClockTimer = setInterval(function() { that.Timer(); }, 5000);

Другая альтернатива: 

this.myClockTimer = setInterval(function() { this.Timer(); }.bind(this), 5000);
0 голосов
/ 05 мая 2020

Или стрелочная функция 

<script>
  customElements.define('worktime-clock', class extends HTMLElement {
    updateTime() {
      let Now = new Date();
      const pad = x => String(x).padStart(2,'0');
      const H = pad(Now.getHours());
      const M = pad(Now.getMinutes());
      const S = pad(Now.getSeconds());
      this.innerHTML = `${H}:${M}:${S}`;
    }
    connectedCallback() {
      this.myClockTimer = setInterval(() => {
        this.updateTime();
      }, 1e3);
    }
    disconnectedCallback() {
      clearInterval(this.myClockTimer);
    }
  })

</script>
<worktime-clock>21:22:23</worktime-clock>

Или для соревнований по кодовому гольфу 

<script>
  customElements.define('worktime-clock', class extends HTMLElement {
    connectedCallback() {
      this.myClockTimer = setInterval(() => {
      	this.innerHTML = new Date().toString().split` `[4];
      }, 1e3);
    }
    disconnectedCallback() {
      clearInterval(this.myClockTimer);
    }
  })

</script>
<worktime-clock>21:22:23</worktime-clock>
...