基于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 Discuz代码中的msn聊天小功能
May 25 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
js函数调用的方式
May 06 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 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恢复数组的key为数字序列的方法
2015/04/28 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
遗传算法python版
2018/03/19 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
导致python中import错误的原因是什么
2020/07/01 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
优质服务口号
2014/06/11 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
聘任合同书
2015/09/21 职场文书
求职自我评价参考范文
2019/05/16 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Python合并pdf文件的工具
2021/07/01 Python
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python