在单击事件中同时调用两个功能

Posted 2021-04-21

在这里，我试图在单击事件中调用这两个功能。我试过通过以“;”分隔的单击事件传递两个功能，但第二个是触发而不是第一个我需要同时触发两个事件功能的触发器。在这里，我附上了代码供参考。所以请帮助我

<li title="xplane" title="yplane"  class="nav-link"
            (click)="createsectionclip('xplane')" (click)="createsectionclip('yplane')">
            <a href="javascript:void(0)"><img [src]="xclipSvg" title="xplane" [src]="yclipSvg" title="yplane"
                    class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px"> </a>
        </li>
        <hr class='seperator-inline-dashed' />
        <li title="yplane" class="nav-link" (click)="createsectionclip('yplane')">
            <a href="javascript:void(0)"> <img [src]="yclipSvg" title="yplane"
                    class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px"> </a>
        </li> 

  public createsectionclip(title: string) {
    title = title.toLowerCase();
    const that = this;
    let imgSvg;
    let dd = "none";

    if (title === that._name) {
      if (this.showsectionclip) {
        imgSvg = that.activeClipping;
      } else {
        imgSvg = that.sectionclipSvg;
      } dd = title;

    } else if (title === 'xplane') {

      imgSvg = that.activeXPlane;
    } else if (title === 'yplane') {

      imgSvg = that.activeYPlane;
    } else if (title === 'zplane') {

      imgSvg = that.activeZPlane;
    } else if (title === 'xnplane') {

      imgSvg = that.activeXNPlane;
    } else if (title === 'ynplane') {

      imgSvg = that.activeYNPlane;
    } else if (title === 'znplane') {

      imgSvg = that.activeZNPlane;
    } else {

      imgSvg = that.sectionclipSvg;
    }
    this.showsectionclip = !this.showsectionclip;
    that.clippingBtnSvg = imgSvg;

    if ((imgSvg !== "none") && (title !== that._name)) {
      dd = title;
    }
    document.dispatchEvent(new CustomEvent('sectionclip', {
      bubbles: false,
      detail: dd
    }));
  }

答案

我认为你应该为xplane和yplane创建另一种方法。

public createBothsectionclip() {
  createsectionclip('xplane');
  createsectionclip('yplane');
}

只需点击即可调用上述方法。试试这个我希望它会帮助你。谢谢

<li title="xplane" title="yplane"  class="nav-link" (click)="createBothsectionclip()">
    <a href="javascript:void(0)">
      <img [src]="xclipSvg" title="xplane" [src]="yclipSvg" title="yplane" class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px">
    </a>
</li>

另一答案

JavaScript是单线程的，所以我不确定如何同时运行它们。我会尝试做这样的事情：

在li元素中：

(click)="InvokeFunctions()"

然后该函数将调用您想要同时运行的那些：

function InvokeFunctions(){
   createsectionclip('xplane');
   createsectionclip('yplane')
}

这可能有用，但是对于更好的解决方案，请查看JavaScript Web Worker。

另一答案

正如其他人已经回答的那样，您可以做的最好的事情就是将这两个函数包装成一个函数然后处理click事件。但是，它们无法同时执行：第一个将首先执行，然后第二个将运行。因此，确保第一个函数不会对第二个函数的结果产生负面影响，并且还要注意，如果它们对同一个函数起作用，则只能看到第二个函数的效果（因为第一个函数的工作可能是被覆盖/重做）。