js 实现队列（vue-简单的消息队列）

：暂无数据 2026-08-25 16:10:12 ：0

大家好,今天小编来为大家解答以下的问题，关于js 实现队列，vue-简单的消息队列这个很多人还不知道，现在让我们一起来看看吧！

本文目录

vue-简单的消息队列
浏览器是如何执行 js 代码的

vue-简单的消息队列

var ManagedClientStatus = {

historyMessage: ,

curMessage: null

}

ManagedClientStatus.addMessage = function (clientObj, statusCode) {

var curMessage = {

client: clientObj,

statusCode: statusCode,

createAt: new Date()

}

if (ManagedClientStatus.curMessage === null) {

ManagedClientStatus.curMessage = curMessage

} else {

ManagedClientStatus.historyMessage.push(curMessage)

setTimerPush()

}

}

var setTimerPush = function () {

var setTimer1 = setInterval(function () {

if (ManagedClientStatus.curMessage === null) {

if (ManagedClientStatus.historyMessage.length 》 0) {

ManagedClientStatus.curMessage = ManagedClientStatus.historyMessage

ManagedClientStatus.historyMessage.splice(0,1)

} else {

clearInterval(setTimer1)

}

}

}, 500)

export default ManagedClientStatus

(这个模块在vue中使用)

created: function(){

//vue中深度检测变量

watch: {

curClientMessage: {

handler(newName, oldName) {

console.log(’obj.a changed’);

},

deep: true，

immediate:true

}

}

//js本身的检测对象内部变量的变化

var the = this

Object.defineProperty(ManagedClientStatus, ’curMessage’, {

get: function () {

return the.curClientMessage

},

set: function (value) {

the.curClientMessage = value

}

})

将this.curClientMessage 的值输出到消息展示模块

浏览器是如何执行 js 代码的

浏览器执行 JavaScript 代码的过程如下：
1. 首先，浏览器会下载并解析 HTML 文件，构建出 DOM（文档对象模型）树。
2. 然后，浏览器会解析 CSS 文件，构建出 CSSOM（CSS 对象模型）树。
3. 当 JavaScript 代码被加载时，浏览器会将 JavaScript 代码解析成抽象语法树（AST）。
4. 接下来，浏览器会创建一个任务队列，将所有需要执行的 JavaScript 任务添加到队列中。
5. 浏览器会逐个执行队列中的任务，这些任务可能是修改 DOM、添加或删除事件监听器等。
6. 当遇到 `setTimeout`、`setInterval` 或 `requestAnimationFrame` 这样的异步任务时，浏览器会在适当的时间将它们添加到任务队列中，等待执行。
7. 当遇到 `alert`、`confirm`、`prompt` 等同步任务时，浏览器会立即执行它们，并将控制权返回给 JavaScript 代码。
8. 当所有任务执行完毕后，浏览器会更新页面内容，显示最新的 DOM 和 CSSOM 状态。
这就是浏览器执行 JavaScript 代码的基本过程。需要注意的是，由于 JavaScript 是单线程的，所以某些耗时较长的任务可能会导致页面暂时无响应。为了避免这种情况，可以使用异步编程技术（如回调函数、Promise、async/await 等）来控制任务的执行顺序。

关于js 实现队列，vue-简单的消息队列的介绍到此结束，希望对大家有所帮助。

js 实现队列（vue-简单的消息队列）