화면이 잠길 때 타이머가 작동을 멈 춥니 다 (반응 네이티브)

Question

화면을 잠글 때 타이머가 멈 춥니 다. 이 기능은 지금까지 다음과 같습니다 : 사용자가 화면을 잠그고 다시 올 줄 때 또한 실행되도록 내가이를 변경하는 방법

function startTimer(dispatch, getState, duration, tickDuration = 1000) { 
    return new Promise((resolve, reject) => { 
    // XXX: Gross local state to keep track of remaining seconds 
    let remaining = duration; 
    let handle = setInterval(function() { 
     const timerState = getState().countdown; 
     // Clear either if the timer stopped or if the handle is a different 
     // handle (ex. new timer started before this one completed) 
     if (!timerState.inProgress || timerState.timerHandle !== handle) { 
     clearInterval(handle); 
     resolve(false); 
     } else { 
     remaining--; 
     if (remaining === 0) { 
      clearInterval(handle); 
      resolve(true); 
     } 

     dispatch({ 
      type: TIMER_COUNTDOWN_TICK, 
     }); 
     } 
    }, tickDuration); 

    dispatch({ 
     type: TIMER_COUNTDOWN_START, 
     duration: duration, 
     timerHandle: handle, 
    }); 
    }); 
} 

어떤 생각?

감사합니다.

Answer 1

두 개의 날짜 개체를 비교 한 다음 두 번째 개체를 비교하여 UI를 올바르게 업데이트하여 문제를 해결했습니다. 제안 된 반응 - 네이티브 - 배경 - 타이머 모듈이 나를 위해 작동하지 않았다.

function startTimer(dispatch, getState, duration, tickDuration = 1000) { 
    return new Promise((resolve, reject) => { 
    // XXX: Gross local state to keep track of remaining seconds 
    let remaining = duration; 
    var endTime = new Date(); 
    endTime.setSeconds(endTime.getSeconds() + remaining); 
    let handle = setInterval(function() { 
     const timerState = getState().countdown; 
     // Clear either if the timer stopped or if the handle is a different 
     // handle (ex. new timer started before this one completed) 
     if (!timerState.inProgress || timerState.timerHandle !== handle) { 
     clearInterval(handle); 
     resolve(false); 
     } else { 
     var compareTime = new Date(); 
     if (compareTime > endTime) { 
      clearInterval(handle); 
      resolve(true); 
     } 

     dispatch({ 
      type: TIMER_COUNTDOWN_TICK, 
      endTime: endTime, 
     }); 
     } 
    }, tickDuration); 

    dispatch({ 
     type: TIMER_COUNTDOWN_START, 
     duration: duration, 
     timerHandle: handle, 
    }); 
    }); 
} 

을 그리고 나뿐만 아니라 디스패치 기능을 조정 : 내가 startTimer 기능처럼 지금 보이는

function countdown(state = { 
    remaining: 0, 
    inProgress: false, 
    timerHandle: -1, 
}, action) { 
    switch (action.type) { 
    case TIMER_COUNTDOWN_START: 
     return Object.assign({}, state, { 
     remaining: action.duration, 
     inProgress: true, 
     timerHandle: action.timerHandle, 
     }); 
    case TIMER_COUNTDOWN_TICK: 
     var endTime = action.endTime; 
     var compareTime = new Date(); 
     var secondsDifference = Math.abs(endTime - compareTime)/1000; 

     return Object.assign({}, state, { 
     remaining: secondsDifference, 
     inProgress: true, 
     }); 
    case REHYDRATE: 
     const incoming = action.payload.countdown; 
     if (incoming) { 
     return { 
      ...state, 
      ...incoming, 
      remaining: processCountdownRehydration(incoming.remaining), 
      inProgress: false, 
      timerHandle: -1, 
     }; 
     } 
     return state; 
    case USER_LOG_OUT: 
    case BACK_BUTTON_PRESSED: 
     return { ...state, remaining: 0, inProgress: false, timerHandle: -1 }; 
    default: 
     return state; 
    } 
} 

Answer 2

문제는 탭을 떠날 때 간격이 고정되어 (예 : 잠금을 통해) setInterval이 항상 실행되는 것을 보장 할 수 없다는 것입니다. 대신 확인하기 위해 클럭 타임을 사용할 수 있습니다 :

const delay = t => new Promise(res => setTimeout(res, t)); 

    async function timer(duration, tickDuration = 1000){ 
    const end = +new Date() + duration; 
    while(+new Date() < end) await delay(tickDuration); 
    } 

그래서 하나가

timer(20000).then(console.log) 

Answer 3

을 할 수있는 당신은 응용 프로그램 사용이 모듈 반응 - 네이티브 배경 타이머의 배경에 타이머를 실행해야 프로세스가 백그라운드에서 실행 중입니다.

import BackgroundTimer from 'react-native-background-timer';