位置: 编程技术 - 正文

JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)(js debounce实现)

编辑:rootadmin

推荐整理分享JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)(js debounce实现),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript代码运行,js代码运行,js代码如何运行,js代码怎么运行,js实现跑马灯,javascript怎么运行代码,js实现跑马灯,js debounce实现,内容如对您有帮助,希望把文章链接给更多的朋友!

最近做了个项目,其中有项目需求是要实现跑马灯抽奖效果,实现此功能主要用到js相关知识,废话不多说,感兴趣的朋友可以阅读下全文。

开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的:

1.移动端1px像素线的问题

对于设计师给我的手机端网页的设计稿都是2倍图。按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2。但是对于1像素的线呢?

先来看两张图,设计稿的效果:

在三星 S4下的实际显示效果:

可以看到这个时候1px的线竟然显示不出来了。这个问题是跟 S4手机的屏幕像素密度有关。关于屏幕像素密度和1px 线的关系有很多文章介绍,可以自行搜索了解。我这里的解决方案是,对1px 的线不做处理。是多少就写多少。就算我的基础单位是rem,也不是其它单位。

2.pc 端浏览器和移动端浏览器容错率的差异

先来看一段代码:

很明显可以发现,我使用的选择器是有语法错误的。但是在浏览器中运行会有什么结果呢?看下图:

很明显可以看出对于属性选择器,就算我有语法错误,PC 端浏览器也是可以正确解析的。但是在手机端,这种写法是不能够正确解析,代码不能够运行。

所以写代码的时候一定要注意一些小细节哈。。。

3.jQuery中选择器的使用

在使用 jQuery 或者是 Zepto 的过程中最经常使用的选择器的写法就是下面这样吧,

只是在$() 中写上自己需要的 Dom 节点的 class或者 ID 或 者使用属性选择器。 在查看 jQuery的文档,对于$()会有这样的描述:

最重要的是看看对 context (它也是我们平时使用中最容易忽略,但是却非常有用的一个参数)的描述:

默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。

刚开始学习 JavaScript 那会儿,就听说了操作 DOM 是很损耗浏览器性能,遍历 DOM 也是很影响程序性能的。 如果我们在指定的范围内查找需要的 Dom 会不会比从整个document 中查找快很多。而且在我们写 web 组件的过程中,一个页面上组件可能出现很多次,那我们怎么判断我们要操作哪个组件呢?这个context参数就会起到决定行的作用。具体请继续看哇。。。

4.jQuery对象到数组的转换

刚开始学习 jQuery的时候在一本书上看到一句话:

jQuery对象就是一个 JavaScript 数组。

JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)(js debounce实现)

而且在使用 jQuery的过程中,都会遇到,js对象转 jQuery对象,jQuery对象转 js对象。关于这些基础不做过多介绍。 但是有时候我们会想在 jQuery对象上运用一些原生Array对象的方法或者属性。来看一个简单的例子:

由图中的代码运行结果,可以知道在 jQuery对象上是没有我们要使用reverse方法的。尽管test是一个数组。 那么我们怎么办才可以让 jQuery对象使用原生的 Array对象的方法呢?

4.1使用原型链扩展

比如下面的代码:

使用prototype来扩展方法的时候,大家一直比较认为是缺点的就是可能会污染已经存在的原型链上的方法。还有就是访问方法的时候需要查找原型链。

4.2将 jQuery对象中的对象添加到数组中

看下面的代码

这样就可以将 jQuery对象翻转。

4.3使用 Array对象的 from()方法

这种方法也是自己在编写插件过程中使用的方法。看一下文档描述:

Array.from() 方法可以将一个类数组对象或可迭代对象转换成真实的数组。个人感觉使用这个代码比较简洁。暂时还不知道有没有性能的影响。继续看下面的代码:

5.setInterval()和setTimeout()对程序性能的影响

因为setTimeout()和setInterval()这两个函数在 JavaScript 中的实现机制完全一样,这里只拿 setTimeout()验证

那么来看两段代码

输出结果如下:

看下面的代码输出是什么

运行这段代码的时候,代码报错

由以上的结果可以知道,当我们在使用setInterval()和setTimeout()的时候,在回掉中使用this的时候,this的作用域已经发生了改变,并且指向了 window。

setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在”任务队列”的尾部添加一个事件,因此要等到同步任务和”任务队列”现有的事件都处理完,才会得到执行。意思就是说在我们设置 setTimeout()之后,也可能不是立即等待多少秒之后就立即执行回掉,而是会等待主线程的任务都处理完后再执行,所以存在 “等待”超过自己设置时间的现象。同时也会存在异步队列中已经存在了其它的 setTimeout() 也是会等待之前的都执行完再执行当前的。

看一个 Demo:

如果运行上面的代码,当执行完 aaa() 等待一秒后并不会立即执行 ccc(),而是会等待 bbb() 执行完再执行 ccc() 这个时候离主线程运行结束已经4s 过去了。

以上内容是针对JavaScript实现跑马灯抽奖活动实例代码解析与优化(一),下篇继续给大家分享JavaScript实现跑马灯抽奖活动实例代码解析与优化(二),感兴趣的朋友敬请关注。

JavaScript实现跑马灯抽奖活动实例代码解析与优化(二) 在上篇文章给大家介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化(一),既然是要编写插件。那么叫做插件的东西肯定是具有的某些特征能够

js实现异步循环实现代码 问题实现异步循环时,你可能会遇到问题。让我们试着写一个异步方法,一次循环打印一次循环的索引值。scriptfor(vari=0;i5;i++){setTimeout(function(){document.wri

javascript每日必学之基础入门 从今天开始,我将带领新朋友们,从了解javascript开始,一步一步地进阶到大神境界,别的不废话,现在开始,我们就一点一点地从入门阶段开始。我们

标签: js debounce实现

本文链接地址:https://www.jiuchutong.com/biancheng/381671.html 转载请保留说明!

上一篇:javascript HTML+CSS实现经典橙色导航菜单

下一篇:js实现异步循环实现代码(js的异步事件循环机制)

  • 摊薄净资产收益率是什么意思
  • 山西税务年度申报在晋税通中怎么申报
  • 在计算应纳税所得额时下列
  • 车辆使用费属于什么税收分类
  • 进项税额不允许抵扣怎么计算
  • 一般户用途可以是往来款吗
  • 工程 开办费
  • 财务费用最后怎么结转
  • 蔬菜坏了还能吃吗
  • 建筑业异地施工如何纳税
  • 自行研发的无形资产会计处理
  • 出售生产线计入哪里
  • 全年累积盈利交所得税吗?
  • 收回已确认的坏账的应收账款
  • 有形动产租赁简易征收适用哪些业务
  • 应收账款增值税专用发票
  • 资本公积金转增股本所获取的收益属于
  • 发票冲销后还能用吗
  • 我公司开给对方13个点发票,后期我公司怎么抵税
  • 销售费用核算原则
  • 费用报销单如何粘贴票据
  • 工资退税手续需要多久
  • 可供出售金融资产会计处理
  • 回收站右键菜单修改
  • 跨年的所得税怎么冲
  • 如何看懂财务报表的书
  • 印花税是按开票金额还是收入
  • 合伙企业财产清算顺序
  • windows10提示更新11
  • 固定资产折旧计算方法
  • 德比郡在哪
  • 深入php:面向对象、模式与实践
  • 企业所得税扣除限额标准
  • 大雾山国家公园在哪里
  • javascript动画教程
  • phpsubstr方法参数
  • error出错
  • javascript手机版
  • 前端等比例缩放
  • 购买方纳税人信息与第三方信息不符
  • push添加对象
  • firewall enable
  • 已经认证了的专利怎么办
  • 上一年度的费用退回清算表怎么填
  • python爬虫入门教程
  • 长期股权投资核算的成本法与权益法的主要差别有哪些
  • js数组entries
  • mysql数据库uuid
  • 新会计准则下的资产负债表
  • 股权转让给个人和公司的区别
  • 年底要结转净利润怎么算
  • 收到投资款如何做账务处理
  • 汇算清缴补交的所得税怎么记帐
  • 自己开发自己施工
  • 外购白酒继续生产白酒
  • 企业未按照规定报送年度报告怎么办
  • 本月没有认证的进项税怎么做分录
  • 集团固定资产管理
  • 生产型企业加计扣除10%
  • 445端口 关闭
  • vista升级选项灰色
  • dropbox app
  • WIN10系统更新之后无法启动
  • centos7.0网络配置
  • 富泽园假日酒店
  • 怎么查显卡信息
  • windows10周年纪念版
  • win8.1介绍
  • linux的samba是什么
  • javascript数据结构与算法 pdf
  • time(0)函数
  • javascript运用
  • Python制作钟表代码
  • js密码验证正则表达式
  • 基于jQuery的AJAX和JSON实现纯html数据模板
  • jquery mobile 加载页面
  • 简述会计估计及其特点
  • 开票盘注销后能否撤回
  • 00后先进人物事迹简介
  • 城镇土地使用税暂行条例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设