Html5 code optimization, including DeviceMotionEvent and so on _ html5 tutorial skills-

Optimize DeviceMotionEvent. In addition to useless code, re-encapsulate DeviceMotionEven. In addition, you cannot continue to execute the DeviceMotionEvent event after the animation is executed. Therefore, optimize the DeviceMotionEvent first;

Remove useless code and re-encapsulate DeviceMotionEven

The Code is as follows:

If (window. DeviceMotionEvent ){
Var speed = 25; // define a value
Var x = y = z = lastX = lastY = lati = 0; // reset all values
Window. addEventListener ('deviceid', function (){
Var acceleration = event. accelerationIncludingGravity; // assign the sensing value to acceleration
X = acceleration. x;
Y = acceleration. y;
Z = acceleration. z;
If (Math. abs (x-lastX)> speed | Math. abs (y-lastY)> speed ){
// TODO: Here, you can perform Logical Data operations after a shake.
Donghua ();
}
LastX = x;
LastY = y;
Las-1 = z;
}, False );
}

Because there are many requirements in the actual project,

For example, you cannot continue to execute the DeviceMotionEvent event when the animation is not completed;

So we made further optimization;

The Code is as follows:

Var f = 1;
Function donghua (){
// Animation events
$ (". Img"). animate ({left: '0', opacity: '1'}, 700, function () {f = 1 ;});
});
If (window. DeviceMotionEvent ){
Var speed = 25; // define a value
Var x = y = z = lastX = lastY = lati = 0; // reset all values
Window. addEventListener ('deviceid', function (){
Var acceleration = event. accelerationIncludingGravity; // assign the sensing value to acceleration
X = acceleration. x;
Y = acceleration. y;
Z = acceleration. z;
If (Math. abs (x-lastX)> speed | Math. abs (y-lastY)> speed ){
// TODO: Here, you can perform Logical Data operations after a shake.
If (f = 1 ){
Donghua ();
F = 0;
}
}
LastX = x;
LastY = y;
Las-1 = z;
}, False );
}

Now it's perfect.