时间戳

首页 > 解决方案 > 如何以角度制作动态间隔

javascript - 如何以角度制作动态间隔

问题描述

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);

  }

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

在我这边，我试图控制this.selectIntervalValuechartIntervalFunction 内部，是的，它得到了值，但是当我将它应用到它时setInterval它不起作用。它自动运行不停运行

标签： javascriptangular

解决方案

取自W3Schools 窗口 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()" ...>

推荐阅读