React Native 인증 코드 카운트다운 도구 클래스 공유
예전 에 타 이 머 를 직접 사 용 했 기 때문에 현 재 를 계산 하지 않 았 습 니 다.프로그램 을 종료 할 때마다 타 이 머 는 가지 않 았 습 니 다.이 도구 류 의 간단 한 해결 프로그램 은 배경 에서 종료 되 고 타 이 머 는 가지 않 는 bug 입 니 다.그러면 코드 를 직접 올 립 니 다.
/**
* Created by zhuang.haipeng on 2017.9.11
*
* ,
*
* : //60 * 1000 60 , 60 * 60 * 100 60 ...
* let countdownDate = new Date(new Date().getTime() + 60 * 1000)
* CountdownUtil.settimer(countdownDate, (time) => {
* Console.log(time) --> {years: 0, days: 0, hours: 0, min: 0, sec: 49, millisec: 0}
* }
*
* : , CountdownUtil.stop() ,
*/
export default class CountdownUtil {
/** */
interval = null;
/**
*
*
*/
static settimer(countdownDate, callbak) {
this.interval = setInterval(() => {
let time = this.getDateData(countdownDate)
callbak && callbak(time)
}, 1000)
}
/**
* --> , ,
* @param countdownDate
* @return {*}
*/
static getDateData(countdownDate) {
let diff = (Date.parse(new Date(countdownDate)) - Date.parse(new Date)) / 1000;
if (diff <= 0) {
this.stop() // 0 ,
return 0;
}
const timeLeft = {
years: 0,
days: 0,
hours: 0,
min: 0,
sec: 0,
millisec: 0,
};
if (diff >= (365.25 * 86400)) {
timeLeft.years = Math.floor(diff / (365.25 * 86400));
diff -= timeLeft.years * 365.25 * 86400;
}
if (diff >= 86400) {
timeLeft.days = Math.floor(diff / 86400);
diff -= timeLeft.days * 86400;
}
if (diff >= 3600) {
timeLeft.hours = Math.floor(diff / 3600);
diff -= timeLeft.hours * 3600;
}
if (diff >= 60) {
timeLeft.min = Math.floor(diff / 60);
diff -= timeLeft.min * 60;
}
timeLeft.sec = diff;
return timeLeft;
}
/**
* --> : 00 01 59
* @param num
* @param length
* @return {*}
*/
static leadingZeros(num, length = null) {
let length_ = length;
let num_ = num;
if (length_ === null) {
length_ = 2;
}
num_ = String(num_);
while (num_.length < length_) {
num_ = '0' + num_;
}
return num_;
}
/** */
static stop() {
clearInterval(this.interval);
}
};
콜백 을 이용 하여 변 환 된 시간 카운트다운 을 전달 합 니 다.콜백 이 돌아 가 는 time 대상 을 인쇄 할 수 있 습 니 다.여기 서 간단하게 인증 코드 카운트다운 을 예 로 들 면:
생각:
1.상태 기 isSent Verify 기본 true 를 설정 하면 인증 코드 를 보 낼 수 있 습 니 다.
2.클릭 후 상태 기 isSent Verify 를 false 로 다시 설정 하여 사용자 가 다시 클릭 하여 네트워크 요청 을 보 내지 못 하 게 합 니 다.
3.카운트다운 시간 을 설명 합 니 다(여 기 는 클릭 할 때 만 설명 할 수 있 습 니 다.componentDid Mount 에 들 어가 면 시간 을 잽 니 다)
4.요청 이 성공 하면 카운트다운 을 설정 하고 time.sec>0 일 경우 시간 을 설정 합 니 다.그렇지 않 으 면 텍스트 를'다시 가 져 오기'로 설정 합 니 다.
5.그 다음 에 문 자 를'다시 가 져 오기'로 판단 한 다음 에 상태 기 isSent Verify 를 true 로 설정 하면 사용자 가 카운트다운 이 끝 난 후에 인증 코드 를 다시 보 낼 수 있 습 니 다.
6.네트워크 요청 이 실 패 했 을 때 catch 에서 isSent Verify 를 true 로 설정 하면 사용자 가 인증 코드 를 다시 가 져 올 수 있 습 니 다.
if (this.state.isSentVerify === true) {
//
let countdownDate = new Date(new Date().getTime() + 60 * 1000)
//
this.setState({
isSentVerify: false
});
Api.userRegisterCheckCode(this.state.phoneText)
.then(
(data) => { //
CountdownUtil.settimer(countdownDate, (time) => {
this.setState({
timerTitle: time.sec > 0 ? time.sec + 's' : ' '
}, () => {
if (this.state.timerTitle == " ") {
this.setState({
isSentVerify: true
})
}
})
})
}
).catch((err) => {
this.setState({
isSentVerify: true,
})
});
}
페이지 를 종료 할 때 타 이 머 를 소각 하 는 것 을 기억 하 세 요.
componentWillUnmount() {
CountdownUtil.stop()
}
효과 그림:이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.