0

I need to call mouseHoverTableRow() function after hovering on tr 3 seconds. If hovering is less than 3 second than I don't want to call mouseHoverTableRow(). I am calling API on mouseHoverTableRow() How to do that?

<tr *ngFor="let item of list" (mouseover)= "window.setTimeout('mouseHoverTableRow(item.id)', 3000)">
<td></td>
</tr
R4444
  • 2,016
  • 2
  • 19
  • 30
Mini
  • 11
  • 6

2 Answers2

1

It is not good practice to use setTimeout in html directly,so instead of doing above you can write that same logic inside your

typescript file

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

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

and then

in html

<tr *ngFor="let item of list" (mouseover)= "onMouseHover(item?.id)">
<td></td>
</tr>
Nirali
  • 454
  • 1
  • 6
  • 16
  • Above code snippet execute after 3 seconds when the user hovers on `tr`, this is not the issue. The issue is when user hover for 3 seconds on a `tr` then the code should be executed. Thanks – Hassan Siddiqui Mar 29 '19 at 06:39
0

.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>
Sarthak Aggarwal
  • 2,284
  • 1
  • 8
  • 12