html5摇一摇代码优化包括DeviceMotionEvent等等

对于DeviceMotionEvent的优化之旅

我们首先要对DeviceMotionEvent进行优化，去除冗余代码并重新封装。以下是初始的代码：

```javascript

if(window.DeviceMotionEvent) {

var speed = 25; //定义一个数值

var x = y = z = lastX = lastY = lastZ = 0; //重置所有数值

window.addEventListener('devicemotion', function(){

var acceleration = event.accelerationIncludingGravity; //将传感值赋给acceleration

x = acceleration.x; y = acceleration.y; z = acceleration.z;

if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {

// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作

donghua();

}

lastX = x; lastY = y; lastZ = z;

}, false);

}

```

然而在实际项目中，我们发现有些需求无法得到很好的满足，比如在动画未执行完毕时，DeviceMotionEvent事件不能继续执行。我们进行了进一步的优化：

现在的代码变得更加完善，我们可以在动画执行期间暂停DeviceMotionEvent事件的处理，等待动画完成后继续。以下是优化后的代码：

```javascript

var f=1; // 用于控制动画执行期间是否处理DeviceMotionEvent事件

function donghua(){

// 动画事件

$(".img").animate({left:'0',opacity:'1'},700,function(){f=1;}); // 动画完成后允许处理DeviceMotionEvent事件

}

if(window.DeviceMotionEvent) {

var speed = 25; //定义一个数值

var x = y = z = lastX = lastY = lastZ = 0; //重置所有数值

window.addEventListener('devicemotion', function(){

if(f == 1){ // 如果允许处理事件，则执行后续代码

var acceleration = event.accelerationIncludingGravity; //将传感值赋给acceleration

x = acceleration.x; y = acceleration.y; z = acceleration.z;

if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {

// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作

donghua(); // 执行动画并暂停事件处理直到动画完成

f=0; // 动画期间暂停处理事件

}

}

lastX = x; lastY = y; lastZ = z; // 更新上一次的值用于比较变化速度

}, false); // 注意这里设置为false是为了在事件处理过程中不阻止其他事件的执行，比如冒泡等。可以根据需要调整这个参数。

}

``` 这样一来，我们的代码就更加完善了，能够应对更多的实际项目需求。现在我们可以安心地让DeviceMotionEvent为我们的应用服务了。