記錄一次移動端開發搖一搖功能所踩的坑

近日工做開發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; });