Joke Collection Website - Public benefit messages - Ionic + Angular.js method to implement verification code countdown function

Ionic + Angular.js method to implement verification code countdown function

Foreword

I have shared with you about

Android

native implementation of verification code countdown. The address is here. Now the company uses it< /p>

Ionic

The

App

also needs to implement similar functions and is now recorded for your reference:

Rendering:

Text

First introduce the concepts related to this article

$interval

$interval

It is

window.setInterval

's

Angular

packaging form. If the function is not canceled Will execute indefinitely. (Cancel use

cancel(promise)

)

Usage:

$interval(fn,delay,[count],[ invokeApply],[Pass]);

Parameter description:

fn

:

Infinitely executed function

< p>Required parameter, must be passed

delay

:

The millisecond value of each call interval

Required parameter, must be passed< /p>

count

:

The value of the number of cycles. If not set, the cycle will be unlimited

It is not a required parameter and does not need to be passed

p>

invokeApply

:

If set to false, dirty value checking will be avoided, otherwise $apply will be called

Non-required parameters, can be omitted Pass

Pass

:

Additional parameters of the function

Parameters are not required and do not need to be passed

Method:

1. cancel(promise)

promise: the return value of the $interval function.

Detailed implementation

$scope.description

=

"Get verification code";

var< /p>

timerHandler

=

null;

/**

*

Countdown

*

@param

time

Control the number of loops

*/

var

countDown

=

function

(second, time)

{

timerHandler

=

$interval(function

()

{

if

(second

<=

0)

{

$interval.cancel(timerHandler);

second

=

59;

$scope.description

=

" Get verification code";

}

else

{

$scope.description

=

second

+

"s

can be resent later";

second--;

}

},

1000,

time)

}

Call

p>

countDown(59,60);

Don’t forget to inject at the end

$interval

Summary

That’s it That’s the entire content of this article. I hope the content of this article can be of some help to everyone’s study or work. If you have any questions, you can leave a message for communication. Thank you for your support to Script House.