小程序异步处理demo计时器setInterval()

实现一个计时器/秒

其实就是要求对某字段每秒执行一次更新

这里用到了官方给的定时器

官方API

每秒刷新一次,所以用setInterval()方法

下面给出关键代码:

由于无关代码过多,这里尽可能贴出相关代码,但不能独立运行,关键方法已注释,使用相当简单

    /**
 * 是否已经呼出
 * 控制状态和定时器
 */
var help = false;
/**
 * 分
 */
var sec = 0;
/**
 * 秒
 */
var min = 0;
/**
 * 定时器id
 * 关闭时要用
 */
var timer ;
Page({

    data: {
     msg:‘110‘,
        label:‘一键求救‘,
    },
    /**
    * 确认呼救
    */
      confirm(){
        console.log("confirm()" )
        if(help){
          this.setData({
            label: ‘已取消‘,
            msg: ‘110‘,

          })
          help = false
          //清除定时器
          clearInterval(timer)
          return
        }
        help = true
        //启动定时器
        timer = setInterval(this.timer, 1000);
        this.setData({
          label:‘正在呼救‘+this.data.msg,
          msg: ‘00:00‘
        })
      },
    /**
    * 定时器回调方法
    */
    timer(){
        sec = sec +1
        if(sec==60) {
          min = min+1
          sec = 0
        }
        let s = sec,s1 = min
        if(sec<10) s = "0"+sec
        if(min<10) s1 = "0"+min
        this.setData({
          msg: s1+":"+s
    })
}

原文地址:https://www.cnblogs.com/lifan1998/p/10284833.html

时间: 2024-10-31 15:53:27

小程序异步处理demo计时器setInterval()的相关文章

把微信小程序异步API为Promise,简化异步编程

把微信小程序异步API转化为Promise.用Promise处理异步操作有多方便,谁用谁知道. 微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多,这使得多异步编程会层层回调,代码一复杂,回调起来就想砸电脑. 于是写了一个通用工具,把微信官方的异步API转化为Promise,方便处理(多)异步操作. 你可以这样用: 准备转化后的方法并暴露出 // /utils/wx-promise.js import toPromise from '/module/to-promi

微信小程序开发工具&amp;demo下载&amp;开发文档

我们先来看一下微信小程序进去是什么样子,给大家发一波福利Mac破解版:https://yunpan.cn/ckvBbavJRwt25 (提取码:a869)Windows破解版:https://yunpan.cn/ckvMx4hncQSvN (提取码:111a) demo下载:https://yunpan.cn/ckvvQVGgak6tx (提取码:7141) 开发文档:http://notedown.cn/weixin/api/ 开发工具 v0.7百度:mac 版本http://dldir1.q

微信小程序异步处理

直接看问题: 然后看打印的结果: 根据上面两图可以看出,代码上先执行的网络请求,再执行打印的变量,但是从下面打印的结果来看,先出结果的是执行打印变量的函数(aafn函数),再打印出网络请求success的回调里返回的数据和赋值后的变量的值: 为什么先执行的aafn,并且打印的值没有赋值上? 因为wx.request是一个异步的请求,所以数据请求的同时,可以继续向下执行函数.所以这里值还没有赋值上就开始打印了变量的值: 这种情况,怎么解决呢? 方法一:  嵌套 在wx.request的succes

小程序入门学习Demo

技术:小程序 概述 适合学习小程序的初级开发人员,入门教程 详细 代码下载:http://www.demodashi.com/demo/14956.html 小程序周边美甲美发预约Demo 代码主要写了轮播+导航切换+返回顶部+滑动切换+下拉菜单选择+用户信息获取.页面布局运用flex布局. 看代码时建议打开小程序文档,更好的了解组件或者Api.附上小程序文档链接:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.

最近开发小程序写的demo

读取json选项卡: index.wxml <!--index.wxml--> <view class="top" wx:for="{{oneList}}" wx:for-item="i" wx:for-index="id" data-id="{{i.id-1}}" wx:key="id" bindtap="add"> {{id}} </

微信小程序--条件渲染-Demo

<!-- helloworld.wxml --> <view>今天吃什么?</view> <view wx:if="{{condition===1}}"> 饺子 </view> <view wx:elif="{{condition===2}}"> 米饭 </view> <view wx:else> 面食 </view> <!-- helloworld.j

小程序异步问题

test: function () { let param = { Channel: "H5", ProductId: this.productId, Version: 70100 }; console.log(2); let url = "xxxxx"; return new Promise((resolve, reject) => { cwx.request({ url: url, data: param, header: { 'content-type'

微信小程序实例源码大全demo下载

怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不同的一个 源码链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1105 微信小程序精品demo:仿网易云音乐:歌单,FM,播放,评论 源码链接:http://www.wxapp-union.com/forum.php?mod=vie

小程序源码下载[demo整理自github]

摘自:https://www.cnblogs.com/ytkah/p/9003620.html 微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天ytkah就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶紧去看看吧!以下小程序排名按star的数量来排,数字动态变化中,请参考具体的项目 weapp-demo ★727 - 仿豆瓣电影微信小程序 wechat-weapp-gank ★537 - Gank微信小程序 SmallAppForQQ ★460