JavaScript “跑马灯”抽奖活动代码解析与优化（一）

最新推荐文章于 2024-01-10 18:30:15 发布

qwerwrqwe

最新推荐文章于 2024-01-10 18:30:15 发布

阅读量224

点赞数

分类专栏： JAVA

JAVA 专栏收录该内容

24 篇文章

订阅专栏

本文分享了在重构抽奖特效插件过程中的JavaScript优化技巧，包括解决1px像素线显示问题、提升jQuery选择器效率、jQuery对象转数组及定时器对性能的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载：http://blog.youkuaiyun.com/yisuowushinian/article/details/50623917

最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候，也顺便把自己的代码重构了一下。
这里主要是来写写自己的优化过程。俗话说：

一个程序猿的进步是从对自己的代码不满意开始的。

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

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

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

这里写图片描述
在三星 S4下的实际显示效果：

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

<code class="language-css hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> absolute</span></span>;
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">13</span>rem</span></span>;
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">9.2</span>rem</span></span>;
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="box-sizing: border-box;">#000</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

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

先来看一段代码：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'[node-type=row-a'</span>).find(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div'</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

很明显可以发现，我使用的选择器是有语法错误的。但是在浏览器中运行会有什么结果呢？看下图：
这里写图片描述

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

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

3.jQuery中选择器的使用

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

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div.testClass'</span>)</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

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

<code class="hljs erlang has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-title" style="box-sizing: border-box;">jQuery</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">([selector,[context]])</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

最重要的是看看对 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 数组。

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

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

4.1使用原型链扩展

比如下面的代码：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">jQuery.prototype.reverse=<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//一些操作</span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

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

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

看下面的代码

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> test = $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div.test'</span>);
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a=[];
$(test).each(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
    a.push($(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>));
});

a.reverse();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

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

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

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

Array.from() 方法可以将一个类数组对象或可迭代对象转换成真实的数组。

个人感觉使用这个代码比较简洁。暂时还不知道有没有性能的影响。继续看下面的代码：

<code class="hljs oxygene has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> test = $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'div.test'</span>);
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a= <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Array</span>.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">from</span>(test);
a.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">reverse</span>();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

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

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

那么来看两段代码

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a ={
    test:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        setTimeout(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.bbb,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);
    },
    bbb:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'----'</span>);
    }
};
a.test()</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

输出结果如下：
这里写图片描述

看下面的代码输出是什么

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> a ={
    test:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        setTimeout(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
            console.log(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.bbb();
        },<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);
    },
    bbb:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'----'</span>);
    }
};
a.test();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

运行这段代码的时候，代码报错
这里写图片描述

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

setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在”任务队列”的尾部添加一个事件，因此要等到同步任务和”任务队列”现有的事件都处理完，才会得到执行。

意思就是说在我们设置 setTimeout()之后，也可能不是立即等待多少秒之后就立即执行回掉，而是会等待主线程的任务都处理完后再执行，所以存在 “等待”超过自己设置时间的现象。同时也会存在异步队列中已经存在了其它的 setTimeout() 也是会等待之前的都执行完再执行当前的。

定时器对队列的工作方式是，当特定的时间过去后将代码插入（执行队列）。

看一个 Demo：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//当 JavaScript 线程空闲后等待4秒将 `bbb()`加入执行队列</span>
setTimeout(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">bbb</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
    console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'bbb'</span>);
},<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4000</span>);

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">aaa</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//当 JavaScript 线程空闲后等待1秒将 `bbb()`加入执行队列</span>
    setTimeout(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">ccc</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ccc'</span>);
    },<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>);
}

aaa();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

如果运行上面的代码，当执行完 aaa() ，JavaScript 线程空闲，这时开始计时：等待1秒后将 ccc()加入执行队列,等待4s 将 bbb() 加入执行队列。这时从 ccc()加入执行队列到 bbb()加入执行队列中间时间间隔是3s。

执行结果如下图：

这里写图片描述