dev_pz
dev_pz
  • 发布:2021-11-17 18:38
  • 更新:2023-03-23 17:26
  • 阅读:738

(修改)一个奇怪的问题,我们几个老码农半天也没搞定!

分类:uni-app

// 更新说明:之前的代码我抄错了,动态赋值与cacheStr不是一条

业务:一个定时器,动态更新数据,另外有一个input,返回值设置了缓存。
问题:
1,定时器执行,动态更新clock显示
2,在微信开发工具下,发现cacheStr 会不断重复执行,但是,定时器与cacheStr并没有任何关联。
3,在h5下没有这个问题

1,view
<input type="text" :value="cacheStr(myStr)“ />

动态更新显示: {{clock}}

2,data
myStr: "",
clock: '',

3,onLoad
myTest();

4,methods
myTest() {
let self = this;
setTimeout(() => {
self.updateClock();
}, 1000)
},

updateClock() {
this.clock = new Date();
setTimeout(this.updateClock, 1000)
},

cacheStr(s) {
console.log('in cacheStr,', s)
return s
},

2021-11-17 18:38 负责人:无 分享
已邀请:
苏陌

苏陌

虽然你用的的setTimeout,但是过一秒,你就调一下它本身setInt,然后myStr就变了,导致重新执行cacheStr

setInt() {  
this.myStr = new Date();  
//过一秒,你就调一下setInt  
setTimeout(this.setInt, 1000)  
},
  • dev_pz (作者)

    抱歉,我之前代码抄错了,已更新,还请多指教

    2021-11-18 19:48

违规昵称4396

违规昵称4396

你明明写了个死循环

恒有信息

恒有信息

每次定时器执行不都是会执行一遍cacheStr吗

  • dev_pz (作者)

    抱歉,我之前代码抄错了,已更新,还请多指教

    2021-11-18 19:48

DCMarvel

DCMarvel

我寻思myStr 不是每次都重新赋值了吗....

  • dev_pz (作者)

    是啊,理解是只有myStr重新赋值了,不会再重复调用 cacheStr函数

    2021-11-18 19:15

清茶涩

清茶涩

这代码你确定不会被领导打?

  • dev_pz (作者)

    还好,之前都是做unix金融系统开发的,对前端vue这些东西还在学习中

    2021-11-18 19:16

1***@qq.com

1***@qq.com

你们这几个老码农可以退休了

  • dev_pz (作者)

    我们也想啊,人到中年,上有老下有小,什么都要会,什么都得学,也不容易啊

    2021-11-18 19:17

afeng1

afeng1 - 90后IT男

水手

水手 - 资深老开发

代码问题。 这代码写的, 哎

小黑子爱rap

小黑子爱rap - jack

你定时器每次给this.clock赋值,界面就会重新渲染,重新渲染就会执行cacheStr(myStr),所以就会一直打印,代码看上去没有关联,实际上vue每次都重新渲染执行了,要不你把this.clock不写再data中,放到外面let clock
然后,其实可以验证一下的,你设置一个button给@click;这个click每次给this.clock赋值,然后观察cacheStr(myStr)是不是被执行了

  • 小黑子爱rap

    封装成一个组件,试一下,这样渲染的时候,可能只有子组件才会重新渲染,不会改变父组件。

    【要不你把this.clock不写再data中,放到外面let clock】这个建议是错的==

    2023-03-23 14:23

y***@126.com

y***@126.com - 脉多多

Page({
data: {
myStr: "",
clock: '',
},
onLoad: function () {
this.myTest();
},
methods: {
myTest() {
let self = this;
setTimeout(() => {
self.updateClock();
}, 1000)
},
updateClock() {
this.clock = new Date();
setTimeout(this.updateClock, 1000)
},
cacheStr(s) {
console.log('in cacheStr,', s)
return s
},
}
})

要回复问题请先登录注册