效果图
效果图
简述
需求：
1.点击发送在输入框中的信息追加到上条信息后
2.定时执行
setTimeout和setInterval的区别
-
setInterval 循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉;
setInterval（“方法名或方法”，“延时”） -
setTimeout：定时执行setTimeout是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行;
setTimeout(“方法名或方法”, “延时”);
使用setTimeout隔一秒后执行点击事件或setInterval每隔五秒执行一次
<template>
<div class="test1">
<h3 align="center">Test1—— 超时自动回复测试</h3>
<h5 style="border:1px solid #3A8EE6;width: 250px;margin-left: 30px;" v-for="(item, index) in arr" :key="index">
{{item.title}}
</h5>
<el-input style="width: 310px;" v-model="title" type="text"> </el-input>
<el-button type="primary" @click="info">发送</el-button>
</div>
</template>
export default {
name: "test",
data: function() {
return {
value: 0,
arr: [{ title: 'test' }],
title: '您好，欢迎咨询有问必应的test客服人员，有什么可以帮到您？',
}
},
methods: {
info() {
this.value++;
console.log(this.value);
console.log(this.title)
// console.info(this.$refs.title.value)
this.arr.push({
title: this.title
})
},
},
created() {
},
mounted() {
this.timer = setTimeout(this.info, 1000); //定时执行setTimeout是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行
// this.timer = setInterval(this.info, 5000); //循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉
},
beforeDestroy() {
clearTimeout(this.timer);
}
}
<style lang="less" scoped>
.test1 {
text-align: left;
width: 400px;
border: 1px solid #000000;
}
</style>
