基于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怎么把&字符换成"&amp:"
Oct 19 Javascript
javascript 写类方式之六
Jul 05 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
浅析javascript的return语句
Dec 15 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 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实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php经典趣味算法实例代码
2020/01/21 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python读取键盘输入的2种方法
2015/06/16 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
pytorch之添加BN的实现
2020/01/06 Python
详解Python中namedtuple的使用
2020/04/27 Python
大学专科生推荐信范文
2013/11/23 职场文书
关于责任的演讲稿
2014/05/20 职场文书
六一儿童节活动总结
2014/08/27 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技