位置: 编程技术 - 正文

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的异步事件循环机制)

  • 白酒的品牌使用费含增值税吗
  • 税后利润向股东分配股息
  • 小规模出售固定资产税率
  • 会计准则折旧年限规定最新
  • 制作费发票明细怎么填
  • 退税发票误勾选确认
  • 税控盘维护费要交吗
  • 所得税汇算清缴分录怎么做
  • 企业税费计算
  • 业务招待费可以开专票吗
  • 个人垫付费用报销申请怎么写
  • 超市里的摊位租金贵吗
  • 陈列费税率多少
  • 已开票未收款怎么报税
  • 公司报销员工的首饰可以税前列支吗
  • 一般纳税人为什么要开专票
  • 会计经验要求怎么填
  • 建筑工程发票抵扣有时间限制吗
  • 制造企业材料返回流程图
  • 申请双软企业会查员工学历吗
  • 出口报关单中有哪些内容
  • 活动展开方式怎么写
  • 一般纳税人增值税税率
  • 如何计算每个月的天数
  • win10设置变成竖排
  • 小规模纳税人的个人所得税怎么算
  • 产品成本核算方法
  • 河马是站在睡觉吗
  • 一般纳税人商业税负多少
  • 存货盘盈盘亏的账务处理
  • vue循环数组渲染列表
  • kaldi官网
  • vue和react差别
  • flask框架入门
  • 工资的会计账务处理
  • 零申报企业所得税季度申报表怎么填写
  • 商铺首次出租是不是要便宜些
  • php设计思路
  • dede标签的使用
  • 公司纳税信用等级B级是什么意思
  • 财务费用相关指标
  • mysql 表不存在报错信息
  • 汇算清缴费用调减
  • 营业外收入的账户核算有哪些
  • 营改增后建筑业怎么开票
  • 产业扶持资金管理办法
  • 工资社保医保计算
  • 收到垫付款计入什么科目
  • 专用发票样图
  • 弱电系统可以入户门吗
  • 各种会计凭证的填制
  • 什么是现金等价物列举
  • SQLserver中cube:多维数据集实例详解
  • mac怎么传输文件夹
  • 如何查看电脑型号及配置
  • backup file
  • win10新版cortana
  • 优麒麟 apk
  • linux和windows关系
  • svcproc.exe - svcproc是什么进程 有什么作用
  • win7 64位系统RAR压缩文件损坏该怎么修复
  • linux根文件系统直接解压到硬盘
  • win10 无线热点
  • win10 edge浏览器崩溃
  • WIN10怎么卸载更新
  • win7正版提示
  • perl常用模块
  • java 同步方法和同步代码块区别
  • 能用javascript 最终
  • xml文件的数据如何读取
  • jquery为什么不火了
  • linux0.11编译
  • 用python做一个贪吃蛇
  • javascript开关
  • flask框架官方文档
  • 没工作个人所得税还用下载吗
  • 消费税由消费者承担吗
  • 出成效的意思
  • 定期定额个体工商户需要做账吗
  • 异辛烷征收消费税2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设