如何在打字稿的鼠标悬停函数中只调用一次函数？答案

【问题标题】：How to call a function only once inside mouseover function in typescript?如何在打字稿的鼠标悬停函数中只调用一次函数？
【发布时间】：2019-11-18 11:09:14
【问题描述】：

我正在使用 angular7。在我的应用程序中，我显示了一个地点列表。当我将鼠标悬停在任何一个地方时，我正在调用一个 ajax 函数来将该值存储在数据库中。

但是当我将鼠标悬停在任何一个元素上时，该 ajax 函数会被多次调用。我只想调用该函数一次。

这是我的角度代码：

<div *ngFor="let place of mapData" (mouseover)="displayTagInfo($event)">
  <div class="filter-name">{{place.name}}</div>
</div>

【问题讨论】：

添加一个对文档范围可见的变量，例如。 var doOnce = false，然后在你的函数内部 if ( doOnce == false) { return; } doOnce = true;
@SPlatten 我应该在哪里调用我的 ajax 函数？如果我将鼠标悬停在 ngFor 的另一个元素上，我的 ajax 函数会再次被调用吗？
您可以将另一个属性传递给函数或让函数查询触发它的元素的 ID，而不是创建一个 JavaScript 对象，然后用 ID 填充该对象然后测试ID 的存在并将其存在用作标志。

标签： javascript angular typescript angular7

【解决方案1】：

在最初为 false 的 mapData 数组对象中放置一个键 hovered = false，因此对于您拥有的每个元素 hovered = false 将那个特定位置传递给 displayTagInfo($event,place) 对象

<div *ngFor="let place of mapData" (mouseover)="displayTagInfo($event,place)">
  <div class="filter-name">{{place.name}}</div>
</div>

在.ts中

displayTagInfo(event,place){
  if(!place.hovered){
    //Do what you want to do, HERE

    place.hovered = true;
  }
}

这样你就可以只将每个元素悬停一次...祝你好运:)

【讨论】：

【解决方案2】：

简短的回答是：在您调用的函数中，您可以添加一个布尔变量来跟踪事件是否已经触发。

你需要在构造函数中初始化变量您要在其中跟踪它的组件。

function displayTagInfo(event){
    if (this.tagInfoDisplayHasBeenFired) {
        return;
    }

    this.tagInfoDisplayHasBeenFired = true

   //Your code
}

【讨论】：