Angular：失焦校验和失焦方法冲突的解决方案 事件循环

问题描述：

今天做项目中，一个input元素中同时添加了 失焦方法 和 失焦校验。今天发现偶发的会仅触发其中一个。和大佬同事讨论许久，发现可能是 二者其一 被另外一个冲掉了。

如果触发了失焦校验，那么失焦方法就会失效。（偶发性）

 <input
    name="itsAInput"
    nz-input
    [(ngModel)]="aValue"
    (blur)="onPatientIdBlur()"
    Validator
    [ngModelOptions]="{ updateOn: 'blur' }"
  />

---

原因分析：

由于JavaScript为单线程，同一时间只能执行处理一个事件。

---

解决方案：

解决方案1：setTimeOut 让另外一个失焦进入第二次的事件循环

    onPatientIdBlur() {
            // 校验失焦 和 输入框失焦 单线程会冲突 使用settimeout事件循环 
            setTimeout(() => {                
                console.log("fuck");
            }, 1);
        
    }

解决方案2：将click事件改为mousedown，让其优先于blur事件执行

mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。

mouseup事件：当在元素上放松鼠标按钮时，会发生mouseup事件。

注意：
(1)mousedown与click 事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。

(2)mouseup与click事件不同，mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
 

资料：

Js EventLoop

并发模型与事件循环 - JavaScript | MDNJavaScript 有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。这个模型与其它语言中的模型截然不同，比如 C 和 Java。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

2022/7/8 

获取debounce也可以达到setTimeout效果