Question

list.component.html

  <nz-select nzShowSearch nzPlaceHolder="Select a interval" [(ngModel)]="selectIntervalValueStr" (ngModelChange)="onSelectChange()" style="width:100%">
        <nz-option nzLabel="5 minutes" nzValue="1000"></nz-option>
        <nz-option nzLabel="10 minutes" nzValue="5000"></nz-option>
        <nz-option nzLabel="15 minutes" nzValue="10000"></nz-option>
      </nz-select>

list.component.ts

infLoop: any;
  selectIntervalValueStr: any;
  selectIntervalValue: number = 300000;



  onSelectChange() {
    this.selectIntervalValue = +this.selectIntervalValueStr;
  }

  chartIntervalFunction() {


 if (this.infLoop != null || this.infLoop != undefined) {
  clearInterval(this.infLoop);
}

this.infLoop = setInterval(() => {
  this.getRoomList();
  console.log(this.selectIntervalValue);
}, this.selectIntervalValue);

  }

如何设置动态间隔。使用选择选项，其中有一个项目相当于300000 5分钟，相当于600000 10分钟，相当于900000 15分钟。

在我这边，我尝试在chartIntervalFunction内部管理this.selectIntervalValue，是的，它获取值，但是当我在setInterval中应用它时，它不起作用。它会自动运行没有停止运行

Answer 1

取自W3Schools Window setInterval():

setInterval（）方法以指定的时间间隔（以毫秒为单位）调用函数或对表达式求值。

setInterval（）方法将继续调用该函数，直到调用clearInterval（）或关闭窗口为止。

实际上，您正在创建一个以特定间隔调用的无限循环。您不能只是通过属性动态更改间隔计数。您必须清除之前创建的无限循环，然后创建一个新的setInterval()

此外，我将避免使用setInterval()作为绑定事件函数的名称。因为它与Window的setInterval(function)不明确。 onSelectChange()之类的东西可以提高可读性。


infLoop;
selectIntervalValueStr;
selectIntervalValue: number = 300000; //300_000 is default if you set here

onSelectChange(){
   this.selectIntervalValue = +this.selectIntervalValueStr; //convert to number with + symbol, alternatively parseInt(this.selectIntervalValueStr) should also work.
}

chartIntervalFunction() {
   if(this.infLoop != null || this.infLoop != undefined){
      clearInterval(this.infLoop);
   }

   this.infLoop = setInterval(() => {
      this.getRoomList();
      console.log(this.selectIntervalValue);
   }, this.selectIntervalValue);
}

您还需要更改html：

<nz-select ... [(ngModel)]="selectIntervalValueStr" (ngModelChange)="onSelectChange()" ...>

如何在角度上进行动态间隔

1 个答案: