5.定时器Timer的使用+实现延迟函数

1. 常规定时器

在规定时间内做某事可以使用定时器完成

1.1 常用属性

interval：触发时间间隔，以毫秒为单位
repeat：是否重复执行，True / False
runing：是否执行，True / False
triggeredOnStart：到大第一次间隔时间前是否触发，True / False

信号：onTriggered()

方法：restart() 重新启动 start() 启动 stop() 停止

1.2 案例：使用定时器更新数字显示：

Text{
    id:count
    anchors.centerIn: parent
    font.pixelSize: 40
    text: "0"
    color: "red"
}
Timer{
    id:timerChangeCount
    interval: 1000
    repeat: true
    running: true
    onTriggered: {
        count.text = String(Number(count.text) + 1)
    }
}

2. 定时器实现延迟函数

可以在定时器内重新定义一个函数，并以传参的形式将回调函数和延迟时间传输过去，实现延迟执行的效果，调用使用时直接通过定时器id调用内部函数即可。

2.1 第一步：添加延迟定时器

定时器内定义函数，并设置两个参数，一个在形式上充当回调函数，一个是延迟时间（单位：ms），具体请看代码注释：

Timer{//延迟定时器
    id:delayed_timer

    //延迟指定函数的执行
    function setTimeout(cb, delayTime) {
		//将delayTime设定为定时器interval的属性值
        delayed_timer.interval = delayTime
        delayed_timer.repeat = false//仅执行一次
        delayed_timer.triggered.connect(cb)//信号连接需要执行的函数
        delayed_timer.triggered.connect(function release () {
        	//以下为断开连接
            delayed_timer.triggered.disconnect(cb)
            delayed_timer.triggered.disconnect(release)
        })
        //函数内部启动定时器
        delayed_timer.start()
    }
}

2.2 第二步：添加“回调函数”

本例当中回调函数功能相对简单，仅对矩形的颜色进行更改，示例图下：

//类似回调函数
function upDateRectColor(){
    rect.color = "red"
}

2.3 第三步：添加其他控件

一个按钮：用于启动延迟定时器
一个矩形框：用于回调函数更改颜色信息
一个文本：用于显示延迟时间
一个常规定时器：用于计数
相关代码如下：

Text{
        id:count
        anchors.bottom: rect.top
        anchors.bottomMargin: 10
        anchors.horizontalCenter: rect.horizontalCenter
        font.pixelSize: 40
        text: "0"
        color: "red"
    }

    Rectangle{
        id:rect
        anchors.centerIn: parent
        width: 200
        height: 50
        color: "lightblue"
    }

    Button{
        id:btn
        anchors.horizontalCenter: rect.horizontalCenter
        width: 100
        height: 50
        text: "更新矩形颜色"
        onClicked: {
            //重置矩形颜色
            rect.color = "lightblue"
            //调用延迟定时器（第一个参数是：回调函数，第二个参数：延迟时间（ms））
            delayed_timer.setTimeout(upDateRectColor,5000)
            //启动数字提醒定时器
            timerChangeCount.start()
            //置零
            count.text = String(Number(0))
        }
    }
    //数字提醒定时器
    Timer{
        id:timerChangeCount
        interval: 1000
        repeat: true
        onTriggered: {
            if(count.text < 5){
                count.text = String(Number(count.text) + 1)
            }else{
                timerChangeCount.stop()
            }
        }
    }

2.4 整体代码如下：

实现功能：点击按钮后，在设定时间之后触发函数更改矩形框颜色，在矩形框上方设置文本提示秒数

import QtQuick 2.15
import QtQuick.Window 2.15
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import QtQuick3D 1.15

ApplicationWindow {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Text{
        id:count
        anchors.bottom: rect.top
        anchors.bottomMargin: 10
        anchors.horizontalCenter: rect.horizontalCenter
        font.pixelSize: 40
        text: "0"
        color: "red"
    }

    Rectangle{
        id:rect
        anchors.centerIn: parent
        width: 200
        height: 50
        color: "lightblue"
    }

    Button{
        id:btn
        anchors.horizontalCenter: rect.horizontalCenter
        width: 100
        height: 50
        text: "更新矩形颜色"
        onClicked: {
            //重置矩形颜色
            rect.color = "lightblue"
            //调用延迟定时器（第一个参数是：回调函数，第二个参数：延迟时间（ms））
            delayed_timer.setTimeout(upDateRectColor,5000)
            //启动数字提醒定时器
            timerChangeCount.start()
            //置零
            count.text = String(Number(0))
        }
    }
    //类似回调函数
    function upDateRectColor(){
        rect.color = "red"
    }

    //数字提醒定时器
    Timer{
        id:timerChangeCount
        interval: 1000
        repeat: true
        onTriggered: {
             if(count.text < 5){
                count.text = String(Number(count.text) + 1)
            }else{
                timerChangeCount.stop()
            }
        }
    }

    Timer{//延迟定时器
        id:delayed_timer

        //延迟指定函数的执行
        function setTimeout(cb, delayTime) {
            //console.log("delayed_timer.setTimeout.cb = ",cb.name,delayTime)
            delayed_timer.interval = delayTime
            delayed_timer.repeat = false
            delayed_timer.triggered.connect(cb)
            delayed_timer.triggered.connect(function release () {
                //console.log("release",cb.name,delayTime,Date.now()/1000.0)
                delayed_timer.triggered.disconnect(cb)
                delayed_timer.triggered.disconnect(release)
            })
            delayed_timer.start()
        }
    }
}

2.5 整体效果展示：

定时器实现延迟函数功能

持续更新中，请大家多多关注…