DeviceMotionEvent程式碼優化例項

本章節分享兩端程式碼例項，實現了對html5的搖一搖程式碼優化。

程式碼優化第一步:

刪除無用的程式碼，進行重新封裝，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
if(window.DeviceMotionEvent){ 
  var speed = 25;//定義一個數值 
  var x = y = z = lastX = lastY = lastZ = 0;//重置所有數值 
  window.addEventListener('devicemotion', function(){ 
    //將感測值賦給acceleration 
    var acceleration =event.accelerationIncludingGravity;
    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事件。

程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var f=1; 
function donghua(){ 
  //動畫事件 
  $(".img").animate({left:'0',opacity:'1'},700,function(){f=1;}); 
}
if(window.DeviceMotionEvent) { 
  var speed = 25;//定義一個數值 
  var x = y = z = lastX = lastY = lastZ = 0;//重置所有數值 
  window.addEventListener('devicemotion', function(){ 
    //將感測值賦給acceleration 
    var acceleration =event.accelerationIncludingGravity;
    x = acceleration.x; 
    y = acceleration.y; 
    z = acceleration.z; 
    if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) { 
      // TODO:在此處可以實現搖一搖之後所要進行的資料邏輯操作 
      if(f==1){ 
        donghua(); 
        f=0; 
      } 
    } 
    lastX = x; 
    lastY = y; 
    lastZ = z; 
  }, false); 
}