在网页上设置监听判断手机是否摇动，为什么有的时候摇动手机能够监测到摇动，有的时候就不能监测到摇动，感觉手机网页卡掉了一样，代码还是一样的代码啊，请问这应该怎么优化啊
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>body{text-align:center} </style>
<script type="text/javascript" src="jquery-1.7.min.js"> </script>
<script type="text/javascript">
var jsonObject=null;
(function() {
// 获取微信用户名
WgateJs = {};
WgateJs.auto_auth=true;
WgateJs.gate_options={force:1,info:"basic"};
WgateJs.ready=function(){
var wgateid=WgateJs.getWgateid();
WgateJs.getWgateUser(function(user){
jsonObject=user;
});
}
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://st.weixingate.com/";
u=u+'st/2016';
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript';
g.defer=true;
g.async=true;
g.src=u;
s.parentNode.insertBefore(g,s);
})();
// 当页面加载完以后会执行window.onload
window.onload = function() {
var nickname = jsonObject.nickname; // 得到微信用户昵称
var img = jsonObject.headimgurl; // 得到微信头像url
var times = -1; // 记录摇动次数
var last_time = 0;
var borderSpeed = 500; // 加速度变化临界值
var x = y = z = last_x = last_y = last_z = 0;
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',shake,false);
}
else
{
alert('not support mobile event');
}
// 每次手机移动的时候都会执行下面shake函数的代码
function shake(eventData)
{
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
var diffTime = curTime-last_time;
// 每隔100ms进行判断
if (diffTime>100) {
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
// 判断手机确实发生了摇动而不是正常的移动
if (speed>borderSpeed) {
times++;
document.getElementById("text").innerHTML="you have shaked "+times+" times";
// 用户的微信昵称和头像连接发送一次即可，不需要每次都发送
if (times==0)
{
document.forms["insertForm"].headimg.value =img ;
document.forms["insertForm"].user.value = nickname;
}
document.forms["insertForm"].time.value = times;
doSend();
}
last_time = curTime;
last_x = x;
last_y = y;
last_z = z;
}
}
}
function doSend()
{
$.ajax({
cache: false,
type: "POST",
url:"get.jsp",
data:$('#ajaxFrm').serialize(),
async: false,
error: function(request) {
},
success: function(data) {
}
});
}
</script>
</head>
<body>
<img src="/images/hand.png" width="600" height="600">
<br/><font size="16" color="red" id="text">shake your phone</font>
<form id="ajaxFrm" name="insertForm">
<input type="hidden" name="user" value="">
<input type="hidden" name="time" value="0">
<input type="hidden" name="headimg" value="">
</form>
</body>
</html>
