기능 도구 모음

1823 단어 function
기능 도구 모음
이런 질문을 많이 받거든요.
1. button.클릭 후 한 번만 호출
2. window.스크롤 트리거가 너무 잦아서 스크롤 불러오는 횟수가 너무 많습니다
3. document.keyup 횟수가 너무 많아서 스마트 알림 호출 횟수가 너무 많아요.
너는 다음과 같은 방법으로 이런 문제를 해결해야 한다


$('a.load').on('click', $.once(function() {
     $('#tabs .first').load(url);
}));

$(window).on('scroll', $.throttle(function() {
     $('#rest').lazyload();    
}));

$(input).on('keyup', $.debounce(function() {
     $.suggest($(this).val())
}));


도구 세트 소스는 다음과 같습니다.

$.bind = function(func, context) {
      var args = Array.prototype.slice.call(arguments, 2);
      return function() {
          return  func.apply(context, args);
      }
}

// 
$.once = function(func){
        var ran = false;
	return function() {
		if(ran) return;
		ran = true;
		func();
	}
}

//ms 
$.throttle = function(func, ms) {
   ms = ms || 150;

   var last = +new Date();
   var timer ;
    return function() {
        var now = +new Date();
        if(now - last > ms) {
             timer = null;
             last = now;
             func();
        } else {
             timer = setTimeout(func, ms - (now-last));
        }
    }
}

// ms 
$.debounce = function(func, ms) {
       ms = ms || 150;

       var timer;
       return function() {
           clearTimeout(timer);
           timer = setTimeout(func, ms);
      }
}

  • underscore,yui에throttle,debounce 두 가지 방법이 있는데 jquery에서는 발견하지 못했다
  • 좋은 웹페이지 즐겨찾기