先执行失去焦点事件再执行点击事件解决办法

最近在开发微信小程序添加用户收货地址时，产品经理提了需求：
失去焦点时，清除按钮消失；
点击清除按钮时，将输入框内容清除；
然后我就按照这个逻辑开始开发了，但是开发完后，并没有达到预期的效果：第一次点击清除按钮时，输入框的内容并没有消失，而清除按钮却不见了，又点击了一次输入框，然后输入框的内容就消失了。后来经过调试发现，第一次点击清除按钮时只触发了失去焦点事件，并没有触发点击事件，又在其他地方点击，这时输入框的内容就消失了。
然后就猜测是优先触发了失去焦点事件。
解决办法：
就是对失去焦点事件进行延迟触发，使用setTimeout，此坑及解决方法，同样会在微信小程序外出现和适用，代码如下：
addressAdd.wxml

<input type="text" placeholder="姓名" value="{{name}}"  bindinput="handelChange" bindfocus="showClear" bindblur="hideClear"/>
<view bindtap="close">
  <image wx:if="{{name.length>0 && showClear}}" mode="scaleToFill" src="../images/close.png"/>
</view>

addressAdd.js

Page({
  data: {
  		name: '',
  		showClear: false
  },
  handelChange(e) {
   		this.setData({
   			name: e.detail.value
		})
  },
  //清空文字
  close(e) {
        this.setData({ 
        	name: '' 
        });
  },
  //获取焦点，显示清空按钮
  showClear(e) {
	this.setData({
  		showClear: true
    })
  },
  //失去焦点,隐藏清空按钮
  hideClear(e) {
    setTimeout(() => {
    	this.setData({
     		showClear: true
   		})
    }, 100)
  }
})