基于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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
理解javascript对象继承
Apr 17 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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的ASP防火墙
2006/10/09 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
Python实现CET查分的方法
2015/03/10 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python 网络编程常用代码段
2016/08/28 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
有关爱国演讲稿
2014/05/07 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技