景象形容

在快利用中弹出一个弹窗，冀望成果是该弹窗在用户确认后再退出，然而应用 onbackpress 管制确认弹窗后主动退出不失效。

问题剖析

快利用引擎实现机制决定了 onbackpress 不能有耗时的操作。当超过一段时间后，如果代码还没有解决完，就会按返回值为 false 解决，即默认敞开该页面。问题代码中通过 $watch 监听 showResult 的变动，若变动则执行 fetch 操作，而这些操作可能还没执行完，从而导致弹窗主动敞开。
问题代码如下：

1.  onBackPress() {2.    console.log("main onBackPress. status =" + this.showResult);
3.    if (this.showResult) {4.      this.$element('textarea').focus({focus: false});
5.      this.content = '';
6.      this.touchedIndex = -1;
7.      // 解决因监听 showResult 变动后的事件处理过缓问题，导致系统返回键有时生效
8.      this.showResult = false;
9.      return true;10.   }
11.   return false;
12. },
13. initDataWatchConfig() {
14.   let that = this;
15.   this.$watch('showResult', (newV, oldv) => {16.     if (!that.showResult) {17.       audio.stop();
18.       this.getphoto()// 此处是一个比拟耗时的操作，以 fetch 举例，只有革除数据后第一次关上能够复现
19.     }
20.   });
21. },
22. getphoto: function () {
23.   var that = this
24.   fetch.fetch({
25.     url: ' 
26.     success: function (ret) {27.},
28.     fail: function (msg, code) {29.}
30.   })}

解决办法

给耗时比拟长的操作减少延时。为 this.showResult = false 减少一个延时，优化后的代码如下：

1.  onBackPress() {2.    console.log("main onBackPress. status =" + this.showResult);
3.    if (this.showResult) {4.      this.$element('textarea').focus({focus: false});
5.      this.content = '';
6.      this.touchedIndex = -1;
7.      // 减少延时，解决因监听 showResult 变动后的事件处理过缓问题，导致系统返回键有时生效
8.      setTimeout(() => {
9.          this.showResult=false; 
10.     }, 800);
11.     return true;
12.   }
13.   return false;
14. }

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204411119222660356?fid=18

原作者：Mayism