uniapp H5 touchstart执行完成并返回成功再执行touchend 失败则不执行touchend

uniapp H5 touchstart执行完成并返回成功再执行touchend 失败则不执行touchend

1. 直接上代码

<tmmplate>
    // 只绑定 touchstart 事件
	<view class="mp_yun_item">
		<view class="mp-ptz-btn mp-yun-top" @touchstart="yunControl">
		</view>
		<view class="mp-ptz-btn mp-yun-right" @touchstart="yunControl">
		</view>
		<view class="mp-ptz-btn mp-yun-bottom" @touchstart="yunControl">
		</view>
		<view class="mp-ptz-btn mp-yun-left" @touchstart="yunControl">
		</view>
	</view>
</template>

<script>
export default {
  data (){
     return {
       robotId:"",
       isfirst:true,
       loadingHide:false
     }
  },
  methods:{
  	//云台控制开始
	yunControl() {
		let that = this;
		// 第一个方法的代码
		let params = {
			robotId: this.robotId,
			action: 'move',
			action_params: {},
		}
          // 声明 p 接受一个promise 异步函数 
		let p = new Promise((resolve, reject) => {
		    // 此处调用 touchstart 触发的接口
			FridApi.setPtzAction(params)
				.then((result) => {
					const res = result
					if (res && res.code === 0) {
					    this.isfirst = true
					    // 成功后抛出
						resolve();
					} else {
						this.$refs.uToast.show({
							message: res?.msg || "云台操作失败",
							duration: 1000,
						})
					}
				})
				.finally(() => {
					this.loading = false
				})
		});
		 // 监听 touchend 鼠标抬起事件 
		window.addEventListener("touchend", (event) => {
		    // p 函数的成功回调
			p.then(value => {
			   // 在 p 函数的 成功回调中再调用  touchend 鼠标抬起事件 
				this.yunControlEnd(params)
			})
		}, {
			once: true
		});
	},
	//云台控制结束  该方法为抬起事件的 执行接口
	yunControlEnd(params) {
		this.loadingHide = true
		// 调用接口
		FridApi.setPtzAction(params)
			.then((result) => {
				const res = result
				this.loadingHide = false
				if (res && res.code === 0) {

				} else {
					this.$refs.uToast.show({
						message: res?.msg || "云台操作失败",
						duration: 1000,
					})
					// 如果抬起事件执行失败 就再执行一次
					if (this.isfirst) {
						this.isfirst = false;
						this.yunControlEnd(params)
					}

				}
			})
			.finally(() => {
				this.loadingHide = false
			})
	},
  }
}
</script>

2. 完成！ （日常记录）