如何在html中添加settimeout

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>