微信小程序settimeout的使用 小程序settimeout定时执行函数

小程序开发

2021-06-13

  我们在开发小程序项目的时候,经常会遇到settimeout函数,通过settimeout可以使得每隔time毫秒就执行一次func函数,经常会用来做计时器或者闹钟,可能对于刚接触小程序开发项目的人来说还不是很熟悉,今天厦门在乎科技为大家带来微信小程序settimeout的使用,一起来了解一下吧。

  

微信小程序settimeout的使用 小程序settimeout定时执行函数


  微信小程序settimeout的使用:

  setTimeout()延迟指定毫秒数后执行指定函数,可通过递归调用setTimeout()来实现各种计时器功能。如果想做每秒钟刷新一次的时钟,只需每次执行时间转换函数并setData更新界面即可。使用clearTimeout("定时器的名字")可以停下指定的计时器。下面是Javascript关于时间的转换函数。// 秒数 --> 时:分:秒function formatTime(seconds) { return [

  parseInt(seconds / 60 / 60), // 时

  parseInt(seconds / 60 % 60), // 分

  parseInt(seconds % 60) // 秒

  ]

  .join(":")

  .replace(/\b(\d)\b/g, "0$1");

  }

  另外,做定时重复调用函数的功能时,用setTimeOut()代替setInterval(),因为setInterval()是有误差的!

  

微信小程序settimeout的使用 小程序settimeout定时执行函数


  使用定时器setTimeout实现弹窗功能:

  其中的两个参数,一个参数是一个函数,用来定义你需要这个定时器执行的操作。

  另一个参数是时间,用来定义循环的时间,单位是毫秒。

  微信小程序的弹窗功能

  wxml部分:

       <view class="myToast" hidden="{{nullHouse}}">输入不可为空</view>

  这里说一下,弹窗归根结底是一个view,我们设置这个view(弹窗)是否显示取决于变量{{nullHouse}},这样的话我可以在需要弹窗的函数中设置变量nullHouse的值,已达到显示弹窗的目的。

  wxss部分:

  /* 弹窗 */

  .myToast{

  width:300rpx;

  height:130rpx;

  line-height: 130rpx;

  margin:80rpx 25%;

  border-radius:20rpx;

  background-color: rgb(114,113,113);

  color:rgb(255,255,255);

  font-size: 36rpx;

  text-align: center;

  position: absolute;

  z-index: 100;

  opacity: 0.85;

  }

  js部分:

  在需要弹窗的函数内写:

  var that = this;

  this.setData({

  nullHouse: false, //弹窗显示

  })

  setTimeout(function () {

  that.setData({nullHouse:true})},1500)

  把nullHouse变量加到data里面,默认值为true表示不显示弹窗。

  这里的意思就是显示弹窗,然后应用定时器,设置弹窗显示1500ms即1.5s,然后就关闭弹窗。

  所以这里参数time:1500,有延迟时间的意思,延迟1500ms执行函数,即相当于让弹窗维持1500ms。

  

微信小程序settimeout的使用 小程序settimeout定时执行函数


  以上就是今天为大家带来的关于“微信小程序settimeout的使用 小程序settimeout定时执行函数”全部内容,如果我们的小程序项目有涉及到需要定时相关的内容,就可以考虑使用settimeout函数属性,想要了解更多关于微信小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

立即咨询

CONTACT US

联系我们

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区莲花南路6号北方大厦601单元

公司地址