jQuery 타이머 간단한 애플리케이션 지침_jquery

편의상 Jquery는 JS의 setTimeout 및 setInterval 메서드를 캡슐화했습니다. 적용 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

/**
* jQuery.timers - jQuery용 타이머 추상화
* 작성자: Blair Mitchelmore(blair DOT mitchelmore AT gmail DOT com)
* WTFPL(http://sam.zoy.org/wtfpl/)에 따라 라이센스가 부여됨 ).
* 날짜: 2009/10/16
*
* @author Blair Mitchelmore
* @version 1.2
*
**/

jQuery.fn.extend({
everyTime: function(interval, label, fn, times) {
return this .each(function() {
jQuery.timer.add(this, Interval, label, fn, times);
});
},
oneTime : function(interval, label, fn ) {
return this.each(function() {
jQuery.timer.add(this, 간격, label, fn, 1);
}); >},
stopTime: function(label, fn) {
return this.each(function() {
jQuery.timer.remove(this, label, fn);
}); 🎜>}
}) ;

jQuery.extend({
timer: {
global: [],
guid: 1,
dataKey: "jQuery.timer ",
정규식: / ^([0-9] (?:.[0-9]*)?)s*(.*s)?$/,
힘: {
// 그래 이건 너무 과한 짓이야...
'ms': 1,
'cs': 10,
'ds': 100,
's': 1000,
'das' : 10000,
'hs': 100000,
'ks': 1000000
},
timeParse: function(value) {
if (값 == 정의되지 않음 || 값 == null )
return null;
var result = this.regex.exec(jQuery.trim(value.toString()))
if (result[2]) {
var num = parseFloat( result[1]);
var mult = this.powers[result[2]] || 1;
return num * mult
} else {
반환 값; 🎜>},
add : 함수(요소, 간격, 레이블, fn, 시간) {
var counter = 0

if (jQuery.isFunction(label)) {
if (!times)
times = fn;
fn = label;
label = 간격;

interval = jQuery.timer.timeParse(간격); 🎜>if (typeof 간격 != '숫자' || isNaN(간격) || 간격 < 0)
return

if (typeof times != '숫자' || isNaN(times) || 회 < 0)
회 = 0;

var 타이머 = jQuery.data(element, this.dataKey) || data(element, this.dataKey, {});

if (!timers[label])
timers[label] = {}

fn.timerID = fn.timerID || this.guid ;

var handler = function() {
if (( counter > times && times !== 0) || fn.call(element, counter) === false )
jQuery.timer.remove(element, label, fn)

handler.timerID = fn.timerID; fn.timerID])
타이머[label][fn.timerID] = window.setInterval(handler,interval);

this.global.push( 요소 )

};
remove: function(element , label, fn) {
var 타이머 = jQuery.data(element, this.dataKey), ret

if ( 타이머 ) {

if (!label) {
for ( 타이머의 라벨 )
this.remove(element, label, fn)
} else if ( 타이머[label] ) {
if ( fn ) {
if ( fn.timerID ) {
window.clearInterval(timers[label][fn.timerID])
delete 타이머[label][fn.timerID]
}
} else {
for ( var fn in 타이머[label] ) {
window.clearInterval(timers[label][fn])
delete 타이머[label][fn]}
> >}

for ( ret in 타이머 ) break;
if ( !ret )
jQuery.removeData(element, this.dataKey)
}
}
}
})

jQuery(window).bind("unload", function() {
jQuery.each(jQuery.timer.global, function(index, item) {
jQuery.timer.remove(item) ;
});
});


JS 코드




🎜>

코드는 다음과 같습니다:


$("#close-button").click(function() {
$(this).oneTime(1000 , function() {
$(this ).parent(".main-window").hide();
})
$("#cancel-button" ).click(function() {
$("#close-button").stopTime();
})

jQuery 타이머 플러그인 주소:

http://plugins.jquery.com/ project/timers

JavaEye 포럼의 다음 JQuery Timers 애플리케이션 지식은 세 가지 기능을 제공합니다1. 간격, [타이머 이름], 함수 수식 이름, [횟수 제한], [함수 프로그램 완료 대기]) 2. oneTime(시간 간격, [타이머 이름], 호출되는 함수)

3. [타이머 이름], [기능 이름])

코드 복사


코드는 다음과 같습니다.

/**************************************************** * *********
* EveryTime(시간 간격, [타이머 이름], 함수 이름, [횟수 제한], [함수 프로그램 완료 대기])
******** ************************************************** * *****/

//1초마다 function test() 실행
function test(){
//뭔가를 하세요...
}
$('body').everyTime('1s',test);

//1초마다 실행
$('body').everyTime('1s', function (){
//뭔가를 하세요...
})

//1초마다 실행하고 타이머 이름을 A
$('body')로 지정합니다. '1s','A',function(){
//뭔가를 하세요...
})

//20초마다 최대 5번 실행하고 타이머 이름을 지정합니다. 장치 이름은 B
$('body').everyTime('2das','B',function(){
//뭔가를 하세요...
},5);
//20초마다 무제한으로 실행하고 타이머 이름을 C로 지정합니다.
//시간 간격에 도달했지만 함수 프로그램이 완료되지 않은 경우 실행 함수가 완료될 때까지 기다려야 합니다. 시간을 계속하기 전에
$('body').everyTime('2das','C',function(){
//20초 이상 걸리는 프로그램 실행
},0, true);

/**************************************************** * *******
* oneTime(시간 간격, [타이머 이름], 호출되는 함수)
******************** ** **************************************/
//10초 카운트다운 후 실행
$('body').oneTime('1das',function(){
//뭔가를 하세요...
})

//카운트다운 100초 후에 실행하고 타이머 이름을 D
$('body').oneTime('1hs', 'D',function() {
//뭔가를 하세요...
})

/**************************************************** * ********
* stopTime ([타이머 이름], [함수 이름])
************************ ** ****************************************/
//$('에서 모든 타이머를 중지합니다. body')
$('body').stopTime ()

//$('body')
$('body').stopTime ('에서 A라는 타이머를 중지합니다. A' );

//$('body')
$('body').stopTime (test)

에서 test()를 호출하는 모든 타이머를 중지합니다. 사용자 정의 시간 단위
소스 코드 열기
찾기

코드 복사 코드는 다음과 같습니다.

powers: {
// 예, 이건 엄청난 과잉입니다...
'ms': 1,
'cs': 10,
'ds': 100,
': 1000,
'das': 10000,
'hs': 100000,
'ks': 1000000
}

사용자 정의할 수 있습니다. 당신이 원하는 것!