JavaScript realization of the lottery Activity example code Analysis and optimization (i) _javascript skills

Recently did a project, which has the project needs is to realize the lottery effect, realize this function is mainly used to JS related knowledge, nonsense not to say, interested friends can read the full text.

Before you begin, look at the two issues and several points of knowledge that are missing from the previous article, which you need to use in your own refactoring process:

1. The problem of moving the 1px pixel line of the end

For the designer to my mobile phone page design manuscript is twice times the figure. By the way, when you write a Web page, the actual size of all objects is 2. But for a 1 megapixel?

First look at the two graphs, design the effect of the manuscript:

The actual display effect under the Samsung S4:

You can see that the 1px line is not showing up at this time. This problem is related to the screen pixel density of the S4 phone. On the screen pixel density and the relationship between the 1px line has a lot of articles, you can search for understanding. My solution here is to not handle the 1px line. Write as much as you can. Even if my base unit is REM, it is not another unit.

{
position:absolute;
Width:13rem;
Height:9.2rem;
border:1px solid #000;
}

Difference between 2.pc-Port browser and mobile-end browser fault tolerance

Let's look at a piece of code:

$ (' [node-type=row-a ']. Find (' div ');

It is obvious that I use a selector that has a syntax error. But what happens when you run in a browser? Look at the picture below:

It is obvious that for the attribute selector, even if I have syntax errors, the PC-side browser can parse correctly. But on the handset side, this kind of writing is not able to parse correctly, the code is not able to run.

So write the code when you must pay attention to some small details ha ...

Use of selector in 3.jQuery

The most commonly used selector in the process of using jQuery or Zepto is the following:

$ (' Div.testclass ')

Simply write the class or ID of the Dom node that you want in $ () or use the attribute selector.
In the view of the jquery document, there is a description for $ ():

JQuery ([Selector,[context]])

The most important thing to look at is the description of the context (which is also one of the most easily overlooked, but very useful, parameters in our daily use):

By default, if the context parameter is not specified, $ () looks for the DOM element in the current HTML document, and if the context parameter, such as a DOM element set or JQuery object, is specified, it is looked up in the context. After the jquery 1.3.2, the order in which the elements are returned is equivalent to the order in which they appear in the context.

When I first started learning JavaScript, I heard that manipulating the DOM was a loss of browser performance and that traversing the DOM also affected program performance.
If we look for the Dom we need in the specified range, it will be much faster than looking through the entire document. And as we write the Web Component, a component on a page can appear many times, so how do we know which component we're going to operate on? This context parameter will play a role in determining the row. Please continue to see Wow ...

Conversion of 4.jQuery objects to arrays

When I first learned jquery, I saw a sentence in a book:

The jquery object is a JavaScript array.

And in the use of jquery process, will encounter, JS object to the JQuery object, jquery object to the JS object. No introduction to these basics.
But sometimes we want to use the methods or properties of some native array objects on the jquery object. Let's look at a simple example:

From the code in the diagram to run the results, you can know that there is no jquery object we want to use the reverse method. Although test is an array.
So what do we do to get the jquery object to use the native Array object method?

4.1 Using prototype chain extensions

For example, the following code:

Jquery.prototype.reverse=function () {
//some operations
}

When using prototype to extend a method, what we have always considered to be a disadvantage is the possibility of polluting the existing prototype chain. There is also the need to find the prototype chain when accessing the method.

4.2 Adding the objects in the jquery object to the array

Look at the code below.

var test = $ (' div.test ');
var a=[];
$ (test). each (function () {
A.push ($ (this));
};
A.reverse ();

This lets you flip the jquery object.

4.3 using the From () method of the Array object

This method is also the method that you use in writing Plug-ins. Take a look at the document description:

The Array.from () method converts a class array object or an iterator object to a real array.
Personal feeling the use of this code is relatively concise. It is not known if there is any performance impact at the moment. Keep looking at the following code:

var test = $ (' div.test ');
var a= array.from (test);
A.reverse ();

Effects of 5.setInterval () and settimeout () on program performance

Because the settimeout () and setinterval () functions are implemented exactly the same in JavaScript, here you only get settimeout () validation

So look at two pieces of code.

var a ={
test:function () {
settimeout (this.bbb,1000);
},
bbb:function () {
console.log ('----');
};
A.test ()

The output results are as follows:

See what the following code output is

var a ={
test:function () {
settimeout (function () {
console.log (this);
THIS.BBB ();
},1000);
},
bbb:function () {
console.log ('----');
}
;
A.test ();

When you run this code, the code complains.

As you can see from the results above, when we use this in SetInterval () and settimeout (), this scope has changed and pointed to window.

The meaning of settimeout (fn,0) is to specify that a task executes at the earliest available idle time of the main thread, that is, as early as possible. It adds an event at the end of the task queue, so it will not be executed until both the synchronization task and the task queue existing events have been processed.
This means that after we set up settimeout (), we may not wait for the number of seconds immediately after the execution of the return, but will wait for the main thread of the task after processing, so there is a "wait" more than the setting time of their own phenomenon. There will also be other settimeout () that already exist in the asynchronous queue and will wait for the previous execution to execute the current.

Look at a Demo:

settimeout (function bbb () {},4000);
function aaa () {
settimeout (function CCC () {},1000);
}
AAA ();

If you run the above code, after the completion of the AAA () wait a second and will not immediately implement the CCC (), but will wait for the BBB () after the execution of CCC () at the end of the main thread run is 4s past.

The above content is for JavaScript to achieve the lottery Activity example code Analysis and optimization (i), the next section continues to share the JavaScript to achieve the lottery drawing activities example code Analysis and Optimization (ii), interested friends please attention.