今回は、React Native で認証コードカウントダウン関数を実装する方法についてご紹介します。 以前は
timer
を直接使用していて、プログラムを終了するたびにタイマーが実行されなかったため、このツール クラスはプログラムがバックグラウンドを終了するときにタイマーが実行されないというバグを単純に解決します。次に、コードをアップロードするだけです~~/**
* 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);
}
};
ログイン後にコピー
コールバックを使用して、変換された時間のカウントダウンを渡します。 callbak によって返された時間オブジェクトを出力できます
。
確認コードのカウントダウンの簡単な例を次に示します:
感想:
1. まず、デフォルトでステート マシン isSentVerify を true に設定して、検証コードを送信します
2. クリックした後、ユーザーが再度クリックしてネットワーク リクエストを送信できないように、ステート マシン isSentVerify を false にリセットします
3.これは、クリックした場合にのみ使用できます。componentDidMount 内にある場合にのみ宣言でき、入力されるとすぐに時間が開始されます)
4. リクエストが成功した後のカウントダウンを設定し、time.sec > かどうかを判断します。 0 に設定し、それ以外の場合はテキストを「再取得」に設定します。
5. 次に、テキストが「再取得」であることを確認し、ステート マシン isSentVerify を true に設定します。これにより、ユーザーは後で確認コードを再度送信できるようになります。カウントダウンは終わりました。
6. ネットワークリクエストが失敗した場合、ユーザーが確認コードを再度取得できるように、isSentVerify を 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()
}
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がReact Native 認証コードカウントダウン機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。