javascript - onblur 与 onclick冲突怎么解决

Question

有四个可折叠的组件，里面有teaxarea 和button https://jsfiddle.net/tt0vvdyt/
input区域onblur的时候会自动调ajax save数据 点击save button也会调ajax save数据。并且弹出对话框提示保存成功并合起折叠控件
问题：
如何在点击button save的时候和onblur的save不重复调用。
方案:
我把button的save给做成假的解决了这个问题。就出现了button在刚打开折叠时点击button 空点击。不能接受
我又做了打开折叠的时候自动focus textarea。解决了以上问题。
由此又衍生了第三个问题。
当focus在第一个折叠区域的textarea时点击展开第二个折叠区域会保存两次。因为当第一次折叠调用onblur保存后，进入onclick第二个展开并focus第二个textarea时ajax恰好返回弹出保存成功对话框 导致textarea瞬间失去焦点。再次调用刚刚展开的textarea 的onblur保存。最后并自动折叠第二个折叠控件。
做到这，我已经无计可施，如何才能让不调用第二次。
怎么解？

Answer 1

做个全局变量，初始时设为false，如果save了，则改变成true，然后在save里判断，如果该变量取值为false，则保存，否则不保存。

Answer 2

在input onblur的事件内加个判断是否是save的button被点击了的条件。具体的，用个全局变量就可以，另外注意下，onblur事件是发生在button click之前的，所以onblur内的函数要适当延时

Answer 3

var save = (function () {
    var saving = false;
    return function () {
        if(saving){
            return;
        }
        
        saving = true;
        ajax().finally(function() {
            saving = false
        })
    }
})();

Answer 4

在onblur里面setTimeou后再发起请求,在onclick里面先clearTimeout。这样你click引起的blur永远不会触发请求。

var tid;
onBlur = function(){
    tid = setTimeout(function(){
        //do blur save
    }, 25);
};

onClick = function(){
    clearTimeout(tid);
    //do click save
}