vue.js客服系统实时聊天项目开发(十二)自动欢迎信息的延迟展示效果
2023-03-07 09:42:40 时间
访客进行聊天窗口以后,会出现几条自动欢迎的信息,这是怎么实现的呢?
其实纯粹是前端实现的效果,并不是后端延迟推送。前端一次性取回几条数据以后,延迟逐条展示出来的
这里就实现了一个函数,参数是一个对象数组,对象中元素有一个key是delay延迟的秒数,还有昵称头像等信息,可以传递一个回调函数,在回调函数中根据这个delay把消息延迟展示到界面上
//延迟展示
function displayGreetings(greetings,callback) {
if(!greetings||greetings.length==0){
return;
}
let delay=0;
for (let i = 0; i < greetings.length; i++) {
if(!greetings[i].delay_second){
delay+=3;
}else{
delay+=greetings[i].delay_second;
}
greetings[i].delay_second=delay;
}
for (let i = 0; i < greetings.length; i++) {
let greeting = greetings[i];
setTimeout(function() {
// 在这里执行你想展示的操作,例如:
callback(greeting);
}, greeting.delay_second*1000);
}
}
使用
let welcome=result.welcome;
tools.displayGreetings(welcome,function(row){
let message={
isme:false,
name:row.name,
avator:row.avator,
content:row.content,
time:tools.getNowDate()
}
_this.msgList.push(message);
});
相关文章
- Permute 3 for mac(全能媒体格式转换器) v3.9.15中文版
- 【数据结构初阶】双向带头循环链表原来是纸老虎,结构复杂,操作简单
- 【数据结构初阶】 顺序表三道题,带你见力扣
- 【C语言学习者必会的题目集锦1】巩固基础,稳步提高
- 【牛客算法-二分查找】刷题和面试兼顾还得看你啊
- Photoshop 2023 (PS 2023) v24中文直装版+便携版
- 【链表习题集1】整体和局部反转链表&同频和快慢指针&合并链表
- 【C++】命名空间&缺省参数&函数重载&引用&内联函数
- 【数组和进阶指针经典笔试题12道】这些题,满足你对数组和指针的所有幻想,come on !
- 【程序的编译和预处理】源文件到可执行程序到底经历了什么?
- Native Instruments Kontakt 7 for Mac(强大音频采样器)
- 【升级版学生信息管理系统&员工工资信息管理系统】+文件操作+更多细节
- 【动态内存管理】malloc&calloc和realloc和笔试题和柔性数组
- 【进阶指针一】字符数组&数组指针&指针数组
- 【指针进阶三】实现C语言快排函数qsort&回调函数
- 【顺序表&学生信息管理系统】学完顺序表就可以上高速写学生信息管理系统
- 【力扣3题】快乐数&有效的字母异位词&字符串中的单词数
- 【括号匹配&洛谷&进制转换】栈的实战,包教包会
- 中创新航欲A股上市,其背后是二线玩家的无奈
- 【双指针】早早开启双指针的大门