uni-app onready 生命周期 query.select('.empty').boundingClientRect(data）会执行两次

uni-app onready 生命周期 query.select(’.empty’).boundingClientRect(data）会执行两次

示例代码：

onready 生命周期 query.select('.empty').boundingClientRect(data） 会执行两次

```

操作步骤：

const query = uni.createSelectorQuery().in(this);
query.select('.empty').boundingClientRect(data => {
console.log("data================: " + JSON.stringify(data));
会打印两次
}).exec();


## 预期结果：


```javascript
const query = uni.createSelectorQuery().in(this);
query.select('.empty').boundingClientRect(data => {
console.log("data================: " + JSON.stringify(data));
会打印两次
}).exec();


## 实际结果：


```javascript
const query = uni.createSelectorQuery().in(this);
query.select('.empty').boundingClientRect(data => {
console.log("data================: " + JSON.stringify(data));
会打印两次
}).exec();


## bug描述：


onready 生命周期 query.select('.empty').boundingClientRect(data） 会执行两次
信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
版本号 最新
HBuilderX 正式
HBuilderX版本 3.1.12
浏览器平台 Chrome
浏览器版本 最新
项目创建方式 HBuilderX

更多关于uni-app onready 生命周期 query.select('.empty').boundingClientRect(data）会执行两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app onready 生命周期 query.select('.empty').boundingClientRect(data）会执行两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，onReady生命周期内使用boundingClientRect执行两次是正常现象，主要原因是：

  1. 页面渲染机制：onReady在页面初次渲染完成时触发，但此时部分异步渲染可能尚未完全结束
  2. 组件更新：如果页面中的数据发生变化导致组件重新渲染，可能会再次触发查询

解决方案：

let hasExecuted = false;

onReady() {
  if (!hasExecuted) {
    const query = uni.createSelectorQuery().in(this);
    query.select('.empty').boundingClientRect(data => {
      console.log("data: " + JSON.stringify(data));
      hasExecuted = true;
    }).exec();
  }
}

或者使用防抖：

onReady() {
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
    const query = uni.createSelectorQuery().in(this);
    query.select('.empty').boundingClientRect(data => {
      console.log("data: " + JSON.stringify(data));
    }).exec();
  }, 100);
}
回到顶部