基于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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
Javascript中With语句用法实例
May 14 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
tensorboard显示空白的解决
2020/02/15 Python
Python chardet库识别编码原理解析
2020/02/18 Python
基于FME使用Python过程图解
2020/05/13 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
护士见习期自我鉴定
2014/02/08 职场文书
无房证明范本
2014/09/17 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
python中对列表的删除和添加方法详解
2022/02/24 Python