记录一次移动端开发摇一摇功能所踩的坑

近日工做开发618活动，活动中有H5摇一摇功能以及声音和动画，百度瞄了几眼感受封装的不太好，就试着本身去封装一套出来，下面记录一下此次开发作踩的坑： 一、H5摇一摇功能： 首先判断了一下，，设备是否支持摇一摇功能：``` if (window.DeviceMotionEvent) { 这里是具体的操做 } else { alert('你的浏览器不支持摇一摇功能.'); }

而后就封装方法，去监听'devicemotion'函数，```
     window.addEventListener('devicemotion', handler, !1);

监听devicemotion函数是否触发，handler函数，是去作具体的操做当摇一摇功能触发；

function handler(e) {

        var current = e.accelerationIncludingGravity;
        var currentTime;
        var timeDifference;
        var deltaX = 0;
        var deltaY = 0;
        var deltaZ = 0;

        //记录上一次设备在x,y,z方向上的加速度 
        if ((lastX === null) && (lastY === null) && (lastZ === null)) {
            lastX = current.x;
            lastY = current.y;
            lastZ = current.z;
            return;
        }

        //获得两次移动各个方向上的加速度绝对差距
        deltaX = Math.abs(lastX - current.x);
        deltaY = Math.abs(lastY - current.y);
        deltaZ = Math.abs(lastZ - current.z);
        //当差距大于设定的阀值而且时间间隔大于指定阀值时，触发摇一摇逻辑
        if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {
            currentTime = new Date;
            timeDifference = currentTime.getTime() - lastTime.getTime();
   
            //时间间隔
            if (timeDifference > timeout && drawStatus) {       
                //触发摇一摇事件
                dealShake();
                lastTime = new Date;
            }
        }

        lastX = current.x;
        lastY = current.y;
        lastZ = current.z;
    }

    function dealShake() {
        if (isShaking) return;  // 判断状态是否为进行时，不然不触发
        isShaking = !0;  // 初始化状态
        drawFun();
        setTimeout(function () {
            $("#shakemusic")[0].pause();
            isShaking = !1;
        }, 1500);
    }

进行到这一步发现，每一次去摇一摇手机都会触发好屡次事件，这与本次功能不符，由于公司要求摇一次只能触发一次后台请求，而后我首先想到的是定时器，轮循，发现不行，每一次去摇动手机仍是会触发屡次，中间各类方法尝试，都没有解决，中间瞄了大神写的，找到了思路，就是当事件触发的时候记录一次时间，而后中间判断时间间隔是否知足初始时设置的时间间隔，以这种方式就完美解决了摇动一次触发屡次事件的问题 2：H5 audio元素的撕逼之路： 吐槽一下IOS对于H5 audio和video元素的限制，这两个新属性在IOS上面是没有办法自动播放，只能用户去手动触发一次才能够播放，这就为一些H5页面带来了问题；不能当即播放； 由于是摇一摇的功能，因此用户进入摇奖页面是和手机没有相互交互的动做，因此就没有办法触发play事件，固然安卓手机上面是能够自动播放，因此也就不存在这个问题了；为了保持统一，只能在进入页面的时候手动在安卓手机的状况下把自动播放功能暂停；我选择的是在用户进入到摇一摇抽奖页面的时候，这个有一个交互，在这个动做的时候触发播放状态``` $('.flowBtn').one('touchstart', function(e) { $('#shakemusic').get(0).touchstart = true; $('#shakemusic').get(0).play(); $('#shakemusic').get(0).load(); return false; });