Question

将鼠标悬停在tr 3秒后，我需要调用mouseHoverTableRow（）函数。如果悬停时间少于3秒，那么我不想调用mouseHoverTableRow（）。我在mouseHoverTableRow（）上调用API 该怎么做？

<tr *ngFor="let item of list" (mouseover)= "window.setTimeout('mouseHoverTableRow(item.id)', 3000)">
<td></td>
</tr

Answer 1

直接在html中使用setTimeout是不好的做法，因此您可以在自己的内部写同样的逻辑，而不是上面的方法

打字稿文件

 onMouseHover(id) {
    setTimeout ((id) => {
         this.mouseHoverTableRow(id)
      }, 3000);
  }

  mouseHoverTableRow(id:number){
  // your function body
  }

然后

以html

<tr *ngFor="let item of list" (mouseover)= "onMouseHover(item?.id)">
<td></td>
</tr>

Answer 2

.ts

let timer;  // global timer

 onMouseHover(id) {

    this.clearTimer(); // clear your existing timer

    this.timer = setTimeout ((id) => { // set timer
         this.mouseHoverTableRow(id)
      }, 3000);
  }

 clearTimer(){
    // clear your timer
    if(this.timer)
       clearTimeout(this.timer)
 }

  mouseHoverTableRow(id:number){
  // your function body
  }

.html

<tr *ngFor="let item of list" (mouseover)= "onMouseHover(item?.id)" (mouseout)="clearTimer()">
<td></td>
</tr>

如何在HTML上添加setimeout

2 个答案: