基于JavaScript的数据结构队列动画实现示例解析


Posted in Javascript onAugust 06, 2020

一 摘要

今天给大家介绍一个基于数据结构中的队列的一个动画,在实现这个动画之前呢,还是给大家讲讲,在JavaScript中我们如何实现一个队列.

二 队列

队列是一种列表,不同的是队列只能在末尾插入元素,在队首删除元素。队列用于存储按顺序排列的数据。先进先出。这点和栈不一样,在栈中,最后入栈的元素反被优先处理。可以将队列想象成银行排队办理业务的人,排队在第一个的人先办理业务,其它人只能排着,直到轮到他们为止。

队列是一种先进先出(FIFO)的数据结构。队列被用在很多地方。比如提交操作系统执行一系列进程。打印任务池等。一些仿真系统用来模拟银行或杂货店里排队的顾客。

队列在程序程序设计中用的非常的频繁,因为javascript单线程,所以导致了任何一个时间段只能执行一个任务,而且还参杂了异步的机制.

在JavaScript的运用中,通常使用队列来进行任务的排序。而任务队列的任务是按进入队列的顺序延迟执行(解决状态一致性)的,即当前一个任务完成后,后面的任务才被执行,如果当前没有任务,则入队列的任务立即执行

三 导致的问题

在异步操作执行的时候,同步代码还在继续,那么同步代码依赖异步,自然就会出错多个同步的任务在不同的时间段被调用

四 具体实现

第一步 构建一个队列

基于JavaScript的数据结构队列动画实现示例解析

第二步 实现类方法

1)向队列添加元素

基于JavaScript的数据结构队列动画实现示例解析

2)向队列删除元素

基于JavaScript的数据结构队列动画实现示例解析

3)读取队列首元素

基于JavaScript的数据结构队列动画实现示例解析

4)读取队列尾元素

基于JavaScript的数据结构队列动画实现示例解析

5)显示队列内的所有元素

基于JavaScript的数据结构队列动画实现示例解析

6)判断队列是否为空

基于JavaScript的数据结构队列动画实现示例解析

第三步 效果展示

)第一步:新建对象

基于JavaScript的数据结构队列动画实现示例解析

)第一步:运行结果

基于JavaScript的数据结构队列动画实现示例解析

五 结论

今天就到这里,明天继续给大家讲讲基于队列的动画,其实大家之前对数据结构了解的话,队列的操作应该不陌生了,队列在实际开发中还是用的比较多的!

到此这篇关于基于JavaScript的数据结构队列动画实现示例解析的文章就介绍到这了,更多相关JavaScript的数据结构队列动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
javascript的push使用指南
Dec 05 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
javascript中this的四种用法
May 11 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
JavaScript中的 new 命令
May 22 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 #Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 #Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 #Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 #Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 #Javascript
Vue Router中应用中间件的方法
Aug 06 #Javascript
You might like
PHP开发需要注意的安全问题
2010/09/01 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
django实现类似触发器的功能
2019/11/15 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
20岁生日感言
2014/01/13 职场文书
学校十一活动方案
2014/02/01 职场文书
自荐信如何制作?
2014/02/21 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
捐助倡议书
2015/01/19 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA