Блог

Здесь я пытаюсь вызвать две функции в событии с одним щелчком мыши. Я попытался передать две функции в событии щелчка, разделив их символом «; «, но запускается вторая, а не первая, где мне нужно запустить обе функции событий одновременно. Здесь я прикрепил код для справки. Так что, пожалуйста, помогите мне

 <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") amp;amp; (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. Однако они не могут быть выполнены одновременно: сначала будет выполнена первая, затем будет запущена вторая. Таким образом, убедитесь, что первая функция не оказывает негативного влияния на результат второй, а также имейте в виду, что, если они действуют на одно и то же, могут быть видны только эффекты второй функции (поскольку работа первой может быть переопределена / переделана).