setInterval中的调用函数

时间:2019-10-10 05:48:32

标签: javascript angular typescript

我想在定时器值变为0时调用一个函数。当我单击卡时,一个弹出窗口打开,然后定时器启动。下面是代码:

import {Component} from '@angular/core';

interface Person {
  name: string
}

@Component({
  selector: 'sample-app',
  template: `
    <div *ngFor="let person of listOfPeople">
      <span *ngIf="personOnEdit !== person" (click)="edit(person)">{{ person.name }}</span>
      <input *ngIf="personOnEdit === person"
             [(ngModel)]="person.name"
             autofocus
             (focusout)="edit(null)" />
    </div>
    <br/>
    <div>
      <form (submit)="addPerson()">
        <input placeholder="New Person Name" #newPersonName />
        <button (click)="addPerson(newPersonName.value); newPersonName.value = ''">Add Person</button>
      </form>
    </div>
  `
})
export class AppComponent {
  personOnEdit: Person = null;
  listOfPeople: Array<Person> = [
    {
      name: "Bob",
    },
    {
      name: "Catie",
    },
    {
      name: "Dan",
    }
  ];

  edit(person) {
    this.personOnEdit = person;
  }

  addPerson(personName) {
    this.listOfPeople.push({ name: personName })
  }
}

已经尝试:using var self=this

如果我使用openModal() { switch (area) { case 'a': var self_t = this; uid = 11; let timer = 20; let interval = setInterval(function () { let elementID = document.getElementById('float-div'); if(elementID == null) { timer = this.inSeconds; } if(timer >= 0) { if(elementID) { elementID.innerHTML = String(timer); } } if (--timer == 0) { if(elementID) { elementID.innerHTML = '0'; } if(area == "a") { self_t.callFunction(uid); // here it is not going, I put debugger here but i can see it doesn't go here! clearInterval(interval); } } }, 1000); break; case 'b': console.log('something else'); break; } } callFunction(uid) { console.log(uid); } ,则会引发错误。

2 个答案:

答案 0 :(得分:2)

为此使用箭头功能。下面是一个片段,尝试一下即可解决问题。 Read more about Arrow functions

openModal() {
  switch (area) {
    case 'a':
      uid = 11;
      let timer = 20;
      let interval = setInterval(() => {
        let elementID = document.getElementById('float-div');
        if (elementID == null) {
          timer = this.inSeconds;
        }
        if (timer >= 0) {
          if (elementID) {
            elementID.innerHTML = String(timer);
          }
        }
        if (--timer == 0) {
          if (elementID) {
            elementID.innerHTML = '0';
          }
          if (area == "abc") {
            this.callFunction(uid); // here it is not going, I put debugger here but i can see it doesn't go here!                          
            clearInterval(interval);
          }
        }
      }, 1000);
      break;

    case 'b':
      console.log('something else');
      break;
  }
}

callFunction(uid) {
  console.log(uid);
}

更新:

使用箭头功能时无需以下语句。 this将在函数内部可用。

  var self_t = this;

希望这会有所帮助:)

答案 1 :(得分:1)

也许您应该修改这些代码

 if(elementID == null) {
            timer = this.inSeconds;
          }

 if(elementID == null) {
            timer = self_t.inSeconds;
          }