JavaScript-js如何实现队列的问题?

服务器管理 服务器管理 主题:1035 回复:2217

JavaScript-js如何实现队列的问题?

夜无邪 发布于 2017-10-25 字数 181 浏览 1324 回复 4

社区有很多关于后端控制的队列方案,可是前端的队列有时候也是很重要的选择,比如:对于一系列需要按次序运行的函数特别有用,特别animate动画,ajax,以及timeout等需要一定时间的函数。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(4

虐人心 2017-10-29 4 楼

用一个数组来存储触发事件。然后用setInterval来进行事件顺序执行。

可以使用一个任务队列,用户的每次点击,均予以响应,并将作为一个任务,由任务队列接收。

function movePanel() {
var tq=taskQueue();
this.last = function (){
if (!this.getCanLast()) return;
tq.addTask(function(){...});
};
this.next = function (){
if (!this.getCanNext()) return;
tq.addTask(function(){...});
};
}

而任务队列的任务是按进入队列的顺序延迟执行(解决状态一致性)的,即当前一个任务完成后,后面的任务才被执行,如果当前没有任务,则入队列的任务立即执行,这样就可以保证movePanel内部的状态的一致性。

function taskQueue() {
var taskList = [];
var isRun = false;

this.addTask = function (task) {
    taskList.push(task);
};

setInterval(function () {
    if (taskList.length > 0 && !isRun) {
        isRun = true;
        taskList.shift()();
        isRun = false;
    }
}, 100);

}

灵芸 2017-10-29 3 楼

用JavaSCript一般都是用数组来操作,因为JavaScript本身不支持队列,以下给你提供几个已经实现的代码:

用javascript数组实现数据结构-堆栈与队列
javascript中利用数组实现的循环队列代码
javascript队列

偏爱自由 2017-10-29 2 楼

分享一个队列操作类:

 /*

  • 模拟队列操作类
    */

var Qu ={};
//构造函数
Qu.Queue = function (len) {

this.capacity = len;        //队列最大容量

this.list = new Array();    //队列数据

};

//入队
Qu.Queue.prototype.enqueue = function (data) {

if (data == null) return;

if(this.list.length>=this.capacity)

{

    this.list.remove(0);

}

this.list.push(data);

};

//出队
Qu.Queue.prototype.dequeue = function () {

if (this.list == null) return;

this.list.remove(0);

};

//队列长度
Qu.Queue.prototype.size = function () {

if (this == null) return;

return this.list.length;

};

//队列是否空
Qu.Queue.prototype.isEmpty = function () {

if (this == null|this.list==null) return false;

return this.list.length>0;

};

//对象数组扩展remove
Array.prototype.remove = function(dx) {

if (isNaN(dx) || dx > this.length) {

    return false;

}

for (var i = 0, n = 0; i < this.length; i++) {

    if (this[i] != this[dx]) {

        this[n++] = this[i]

    }

}

this.length -= 1

}

  

调用例子:

//队列初始化

var queue = new Qu.Queue(10);

queue.enqueue(1);

queue.enqueue(2);

queue.enqueue(3);

参考资料:js模拟队列类

灵芸 2017-10-28 1 楼

JavaScript只能通过数组来实现

 /*

  • @brief: 定义队列类

  • @remark:实现队列基本功能
    /
    function Queue(){
    //存储元素数组
    var aElement = new Array();
    /

    • @brief: 元素入队
    • @param: vElement元素列表
    • @return: 返回当前队列元素个数
    • @remark: 1.EnQueue方法参数可以多个
    • 2.参数为空时返回-1
      /
      Queue.prototype.EnQueue = function(vElement){
      if (arguments.length == 0)
      return - 1;
      //元素入队
      for (var i = 0; i < arguments.length; i++){
      aElement.push(arguments[i]);
      }
      return aElement.length;
      }
      /
    • @brief: 元素出队
    • @return: vElement
    • @remark: 当队列元素为空时,返回null
      */
      Queue.prototype.DeQueue = function(){
      if (aElement.length == 0)
      return null;
      else
      return aElement.shift();

    }
    /*

    • @brief: 获取队列元素个数
    • @return: 元素个数
      /
      Queue.prototype.GetSize = function(){
      return aElement.length;
      }
      /
    • @brief: 返回队头素值
    • @return: vElement
    • @remark: 若队列为空则返回null
      /
      Queue.prototype.GetHead = function(){
      if (aElement.length == 0)
      return null;
      else
      return aElement[0];
      }
      /
    • @brief: 返回队尾素值
    • @return: vElement
    • @remark: 若队列为空则返回null
      /
      Queue.prototype.GetEnd = function(){
      if (aElement.length == 0)
      return null;
      else
      return aElement[aElement.length - 1];
      }
      /
    • @brief: 将队列置空
      /
      Queue.prototype.MakeEmpty = function(){
      aElement.length = 0;
      }
      /
    • @brief: 判断队列是否为空
    • @return: 队列为空返回true,否则返回false
      /
      Queue.prototype.IsEmpty = function(){
      if (aElement.length == 0)
      return true;
      else
      return false;
      }
      /
    • @brief: 将队列元素转化为字符串
    • @return: 队列元素字符串
      */
      Queue.prototype.toString = function(){
      var sResult = (aElement.reverse()).toString();
      aElement.reverse()
      return sResult;
      }
      }