JS 간단한 스로틀

해결법

1.나는이 기능을 잘 테스트 버전을 찾기 위해 underscore.js 또는 lodash 소스 코드를 사용합니다.

나는이 기능을 잘 테스트 버전을 찾기 위해 underscore.js 또는 lodash 소스 코드를 사용합니다.

여기에 자신 underscore.js에 대한 모든 참조를 제거하기 위해 밑줄 코드의 약간 수정 된 버전입니다 :

// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

당신이 밑줄 지원하는 모든 옵션이 필요하지 않는 경우이 코드가 간소화 될 수 있음을 참고하시기 바랍니다.

이 기능의 매우 간단하고 구성 할 수없는 버전을 검색 할 수 있습니다 :

function throttle (callback, limit) {
    var waiting = false;                      // Initially, we're not waiting
    return function () {                      // We return a throttled function
        if (!waiting) {                       // If we're not waiting
            callback.apply(this, arguments);  // Execute users function
            waiting = true;                   // Prevent future invocations
            setTimeout(function () {          // After a period of time
                waiting = false;              // And allow future invocations
            }, limit);
        }
    }
}

편집 1 : 제거 @Zettam의 의견에 밑줄 또 다른 참조 들으

편집 2 : lodash 가능한 코드를 단순화, THX에 @lolzery @wowzery의 의견에 대한 추가 제안

편집 3 : 인해 인기 요청에, 나는의 '@vsync에서 적응, 함수의 매우 간단한, 비 구성 버전을 추가 코멘트

2.콜백 : 호출해야하는 기능을한다

콜백 : 호출해야하는 기능을한다

제한 : 횟수 그 기능은 제한 시간 내에 호출해야

시간 : 시간 범위가 제한 횟수를 재설정

기능과 사용 : 사용자 1 분에 10 번 호출 할 수있는 API가 있다고 가정

기능 제한 (콜백 제한 시간) { 수를 모니터링 /// VAR calledCount는 = 0; 은`time`이 통과 된 후`calledCount`의 varialbe를 새로 /// 하여 setInterval (함수 () {calledCount = 0}, 시간); /// 호출됩니다 클로저를 만들 {() 함수를 리턴 제한이 전달 된 함수를 호출하지 않는 다음를 초과하는 경우 /// (한계를 확인 만약 (최대> calledCount) { 수를 증가 /// calledCount ++; () 콜백; 함수를 호출 /// } ( '한계가 초과했기 때문에 호출하지') 다른 CONSOLE.LOG; }; } ////////////////////////////////////////////////// ////////// // 사용하는 방법 함수를 생성 /// 스로틀 기능에 전달할 CB 함수 () { ( "소위") CONSOLE.LOG; } /// 매 100 밀리 초 단위로 폐쇄 함수를 호출 하여 setInterval (스로틀 (CB, 3, 1000), 100);
3.(그리고 더 최근의 방문자를 위해) 여기 토론에 추가하는 경우 사용하지 않는 이유 거의 사실상의 스로틀 lodash는 작은 크기의 패키지 또는 번들을하는 것입니다에서, 그것은 전체 대신 번들 만 스로틀 포함하는 것이 가능 lodash 라이브러리입니다. ES6에서 예를 들어, 뭔가를 같이 할 것입니다 :

(그리고 더 최근의 방문자를 위해) 여기 토론에 추가하는 경우 사용하지 않는 이유 거의 사실상의 스로틀 lodash는 작은 크기의 패키지 또는 번들을하는 것입니다에서, 그것은 전체 대신 번들 만 스로틀 포함하는 것이 가능 lodash 라이브러리입니다. ES6에서 예를 들어, 뭔가를 같이 할 것입니다 :
```
import throttle from 'lodash/throttle';
```
또한, 스로틀은 ES6의 간단한 가져 오기를 사용 또는 ES5에서 필요로 할 수있다 lodash라는 lodash.throttle에서 패키지가있다.

4.무엇에 대해?

무엇에 대해?

function throttle(func, timeFrame) {
  var lastTime = 0;
  return function () {
      var now = new Date();
      if (now - lastTime >= timeFrame) {
          func();
          lastTime = now;
      }
  };
}

단순한.

당신은 원본을 봄에 관심이있을 수 있습니다.

5.난 그냥 창 크기 조정 이벤트에 대한 스로틀 / 디 바운스 기능을 필요로했으며, 호기심, 나는 이러한이 무엇인지 알고 싶어 그들이 어떻게 작동합니다.

난 그냥 창 크기 조정 이벤트에 대한 스로틀 / 디 바운스 기능을 필요로했으며, 호기심, 나는 이러한이 무엇인지 알고 싶어 그들이 어떻게 작동합니다.

내가 SO에 여러 개의 블로그 게시물과 품질 관리을을 읽었습니다,하지만 그들은 모두가이 문제를 복잡하게하는 것, 도서관을 제안하거나 설명하지 간단한 일반 JS 구현을 제공합니다.

이 풍부한 이후 나는 설명을 제공하지 않습니다. 그래서 여기 내 구현입니다 :
```
function throttle(callback, delay) {
    var timeoutHandler = null;
    return function () {
        if (timeoutHandler == null) {
            timeoutHandler = setTimeout(function () {
                callback();
                clearInterval(timeoutHandler);
                timeoutHandler = null;
            }, delay);
        }
    }
}

function debounce(callback, delay) {
    var timeoutHandler = null;
    return function () {
        clearTimeout(timeoutHandler);
        timeoutHandler = setTimeout(function () {
            callback();
        }, delay);
    }
}
```
이러한 힘의 필요 비틀기 (예를 들어, 처음에 콜백 즉시 호출되지 않습니다).

(창 크기를 조정하려고) 행동의 차이를 참조하십시오 :

함수 스로틀 (콜백 지연) { VAR timeoutHandler = NULL; {() 함수를 리턴 경우 (timeoutHandler == NULL) { timeoutHandler =에서는 setTimeout (함수 () { () 콜백; 됨 clearInterval (timeoutHandler); timeoutHandler = NULL; }, 지연); } } } 함수 바운스 (콜백 지연) { VAR timeoutHandler = NULL; {() 함수를 리턴 사항 clearTimeout (timeoutHandler); timeoutHandler =에서는 setTimeout (함수 () { () 콜백; }, 지연); } } VAR cellDefault = document.querySelector ( "#의 cellDefault의 사업부"); VAR cellThrottle = document.querySelector ( "# cellThrottle의 사업부"); VAR cellDebounce = document.querySelector ( "#의 cellDebounce의 사업부"); window.addEventListener ( "크기 조정", 기능 () { VAR 스팬 document.createElement ( "스팬") =; span.innerText = window.innerWidth; cellDefault.appendChild (기간); cellDefault.scrollTop = cellDefault.scrollHeight; }); window.addEventListener ( "조정"스로틀 (함수 () { VAR 스팬 document.createElement ( "스팬") =; span.innerText = window.innerWidth; cellThrottle.appendChild (기간); cellThrottle.scrollTop = cellThrottle.scrollHeight; } 500)); window.addEventListener ( "크기 조정"디 바운스 (함수 () { VAR 스팬 document.createElement ( "스팬") =; span.innerText = window.innerWidth; cellDebounce.appendChild (기간); cellDebounce.scrollTop = cellDebounce.scrollHeight; } 500)); 테이블 { 국경 - 붕괴 : 붕괴; 여백 : 10px; } 테이블 TD { 국경 : 1 픽셀의 솔리드 실버; 패딩 : 5px; } 테이블 TR : 마지막 자식 TD div의 { 폭 : 60 픽셀; 높이 : 200 픽셀; 오버 플로우 : 자동; } 테이블 TR : 마지막 자식 TD 범위 { 표시 : 블록; } <표> 기본 스로틀 바운스

JSFiddle
6.여기에 내가 9LOC에 ES6에서 스로틀 기능을 구현하는 방법은, 그것은 도움이되기를 바랍니다

여기에 내가 9LOC에 ES6에서 스로틀 기능을 구현하는 방법은, 그것은 도움이되기를 바랍니다
```
function throttle(func, delay) {
  let timeout = null
  return function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.call(this, ...args)
        timeout = null
      }, delay)
    }
  }
}
```
그것이 어떻게 작동하는지 보려면이 링크를 클릭하십시오.
7.나는 몇 가지 조절 기능이있는 NPM 패키지를 만든 :

나는 몇 가지 조절 기능이있는 NPM 패키지를 만든 :

반환 W가 대기 대부분의 모든 W 밀리 초에서 호출 할 수있는 함수의 버전. W가 대기 얻을 것보다 더 자주 발생하여 FUNC를 호출하면 모든 W 밀리 호출 할

반환 W가 대기 대부분의 모든 W 밀리 초에서 호출 할 수있는 함수의 버전. 라는 하나가 될 것이다 마지막 호출 W보다 더 자주 발생 호출 (마지막 우선 순위 소요)

W는 대기이고, 함수는 대부분의 모든 W 밀리 초에서 호출 할 제한합니다. W 이상 통화가 분리되었습니다

8.이러한 목적으로, 엠버에서 그것의 Backburner.js에 적합한 라이브러리가있다.

이러한 목적으로, 엠버에서 그것의 Backburner.js에 적합한 라이브러리가있다.

https://github.com/BackburnerJS/

당신은 너무 그것을 사용하십시오.

var backburner = new Backburner(["task"]); //You need a name for your tasks

function saySomething(words) {
  backburner.throttle("task", console.log.bind(console, words)
  }, 1000);
}


function mainTask() {
  "This will be said with a throttle of 1 second per word!".split(' ').map(saySomething);
}

backburner.run(mainTask)

9.다음은 카스 포스트의 내 자신의 버전입니다 :

다음은 카스 포스트의 내 자신의 버전입니다 :

throttle: function (callback, limit, time) {
    var calledCount = 0;
    var timeout = null;

    return function () {
        if (limit > calledCount) {
            calledCount++;
            callback(); 
        }
        if (!timeout) {
            timeout = setTimeout(function () {
                calledCount = 0
                timeout = null;
            }, time);
        }
    };
}

나는하여 setInterval을 사용하는 것은 좋은 생각되지는 사실을 알게 될 것입니다.

10.이 스로틀 기능은 ES6에 빌드입니다. 콜백 함수는 인수 (인수를) 소요되며, 여전히이 스로틀 기능을 감싸 작품. 앱의 필요에 따라 지연 시간을 사용자 정의 할 무료로해야합니다. 그 사용 빈도의 경우의 예에 불과 "oninput"이 100ms 당 1 시간 _ 모드 이벤트에 사용된다 :

이 스로틀 기능은 ES6에 빌드입니다. 콜백 함수는 인수 (인수를) 소요되며, 여전히이 스로틀 기능을 감싸 작품. 앱의 필요에 따라 지연 시간을 사용자 정의 할 무료로해야합니다. 그 사용 빈도의 경우의 예에 불과 "oninput"이 100ms 당 1 시간 _ 모드 이벤트에 사용된다 :
```
const callback = (...args) => {
  console.count('callback throttled with arguments:', args);
};

throttle = (callback, limit) => {
  let timeoutHandler = 'null'

  return (...args) => {
    if (timeoutHandler === 'null') {
      timeoutHandler = setTimeout(() => {            
        callback(...args)
        timeoutHandler = 'null'
      }, limit)
    }
  }
}

window.addEventListener('oninput', throttle(callback, 100));
```
추신 @Anshul 설명과 같이 강제 시행에게 함수가 시간이 지남에 따라 호출 할 수있는 시간의 최대 수를 조절. 마찬가지로 "100 밀리 초마다 한 번 가장에서이 기능을 실행합니다."
11.아래는 내가 13 LOC에, 생각할 수있는 가장 간단한 스로틀입니다. 그것은 시간 제한을 함수가 호출 될 때마다 생성하고 이전을 취소합니다. 예상대로 원래의 기능은 적절한 상황과 인수라고합니다.

아래는 내가 13 LOC에, 생각할 수있는 가장 간단한 스로틀입니다. 그것은 시간 제한을 함수가 호출 될 때마다 생성하고 이전을 취소합니다. 예상대로 원래의 기능은 적절한 상황과 인수라고합니다.

함수 스로틀 (FN, 지연) { VAR 시간 제한 = NULL; 창 함수 throttledFn () { window.clearTimeout (초과); var에 CTX이 =; VAR 인수 = Array.prototype.slice.call (인수); 초과 = window.setTimeout (callThrottledFn 함수 () { fn.apply (CTX, 인수); }, 지연); } } // 그것을 밖으로 시도! window.addEventListener ( '크기 변경'스로틀 (함수 () { 을 console.log ( '크기 조정!'); } 200));
12.예를 들어 아래에서, 버튼을 여러 번 클릭하려고하지만, MYFUNC 기능은 3 초에 한 번만 실행됩니다. 함수 스로틀 기능으로 전달 실행하고 delay.It는 obj.throttleFunc에 저장되어있는 폐쇄를 반환한다. obj.throttleFunc가 폐쇄를 저장 지금부터, isRunning는의 값은 내부에 유지됩니다.

예를 들어 아래에서, 버튼을 여러 번 클릭하려고하지만, MYFUNC 기능은 3 초에 한 번만 실행됩니다. 함수 스로틀 기능으로 전달 실행하고 delay.It는 obj.throttleFunc에 저장되어있는 폐쇄를 반환한다. obj.throttleFunc가 폐쇄를 저장 지금부터, isRunning는의 값은 내부에 유지됩니다.

함수 스로틀 (FUNC 지연) { isRunning는하자; 창 함수 (인수 ...) { 상황이 =하자; //이 함수를 소유하는 객체의 컨텍스트를 저장 만약 (! isRunning는) { = 사실 isRunning는; func.apply (문맥, 인수)이이를 소유하는 개체의 컨텍스트 기능을 실행 // 에서는 setTimeout (함수 () { isRunning는 = 거짓; }, 지연); } } } 함수 MYFUNC (PARAM) { CONSOLE.LOG는 ( '$ {} PARAM 번째'초에서 this.name $ {}를 호출); } {= OBJ하자 이름 : "스로틀 기능을" throttleFunc : 스로틀 (MYFUNC 3000) } handleClick 함수 () { obj.throttleFunc (새 Date () 후 getSeconds ().); } 버튼 { 폭 : 100 픽셀; 높이 : 50 픽셀; 폰트 크기 : 20 픽셀; } <버튼의 onclick = "handleClick ()"> 저를 클릭

함수 스로틀 (FUNC 지연) { isRunning는하자; {() 함수를 리턴 만약 (! isRunning는) { = 사실 isRunning는; FUNC () 에서는 setTimeout (함수 () { isRunning는 = 거짓; }, 지연); } } } MYFUNC 함수 () { CONSOLE.LOG ( '호출'); } throttleFunc = 임부 (MYFUNC 3000)하자; handleClick 함수 () { throttleFunc (); } 버튼 { 폭 : 100 픽셀; 높이 : 50 픽셀; 폰트 크기 : 20 픽셀; } <버튼의 onclick = "handleClick ()"> 저를 클릭
13.나는 또한 당신이 전화를 알고 단 1 기능이있는 경우에 대한 간단한 솔루션을 제안 할 (예 : 검색)

나는 또한 당신이 전화를 알고 단 1 기능이있는 경우에 대한 간단한 솔루션을 제안 할 (예 : 검색)

여기 난 내 프로젝트에 무슨 짓을
```
let throttle;

function search() {
    if (throttle) {
      clearTimeout(throttle);
    }
    throttle = setTimeout(() => {
      sendSearchReq(str)
    }, 500);
  }
```
검색은 입력 변경 이벤트에서 호출

14.

function throttle(targetFunc, delay){
  let lastFunc;
  let lastTime;

  return function(){
    const _this = this;
    const args = arguments;

    if(!lastTime){
      targetFunc.apply(_this, args);
      lastTime = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function(){
        targetFunc.apply(_this, args);
        lastTime = Date.now();
      }, delay - (Date.now() - lastTime));
    }
  }
}

시도 해봐 :

window.addEventListener('resize', throttle(function() {
  console.log('resize!!');
}, 200));

15.간단한 스로틀 기능 -

간단한 스로틀 기능 -

버튼을 클릭에 계속주의 -, 당신은 클릭에 제 만있는 거 킵 클릭하면 때까지 매 5 초 후에에서 콘솔 로그를 볼 수 있습니다.

HTML -

<button id='myid'>Click me</button>

자바 스크립트 -

const throttle = (fn, delay) => {
  let lastTime = 0;
  return (...args) => {
      const currentTime = new Date().getTime();
      if((currentTime - lastTime) < delay) {
        return;
      };
      lastTime = currentTime;
      return fn(...args);
  }
};

document.getElementById('myid').addEventListener('click', throttle((e) => {
  console.log('I am clicked');
}, 5000));

16.우리는 또한 플래그 -를 사용하여 구현할 수 있습니다

우리는 또한 플래그 -를 사용하여 구현할 수 있습니다

VAR 비싼 = 함수 () { ( "비싼 functionnns")을 CONSOLE.LOG; } window.addEventListener (스로틀을 "조정"(비싼, 500)) 함수 스로틀 (expensiveFun, 제한) { 플래그가 true =하자; {() 함수를 리턴 상황이 =하자; 인수 = 인수하자; 경우 (플래그) { expensiveFun.apply (문맥에 args); 플래그 = 거짓; 에서는 setTimeout (함수 () { 플래그는 진정한 =; } 제한); } } }

from https://stackoverflow.com/questions/27078285/simple-throttle-in-js by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery로 HTML 주석을 선택 (0)	2020.10.21
[JQUERY] jQuery를 단일 키 누르기 이벤트에 여러 개의 키를 감지 (0)	2020.10.21
[JQUERY] 메뉴에서 .active는 jQuery를 추가 기능 클래스 (0)	2020.10.21
[JQUERY] jQuery를 라디오에 따라 사용 안 함 옵션을 선택합니다 (모든 브라우저에 대한 필요 지원) 선택 (0)	2020.10.21
[JQUERY] 어떻게 JQuery와 - 직렬화 된 형식을 PHP는-를 unserialize합니까? (0)	2020.10.21

복붙노트

[JQUERY] JS 간단한 스로틀

JS 간단한 스로틀

해결법

1.나는이 기능을 잘 테스트 버전을 찾기 위해 underscore.js 또는 lodash 소스 코드를 사용합니다.

2.콜백 : 호출해야하는 기능을한다

4.무엇에 대해?

5.난 그냥 창 크기 조정 이벤트에 대한 스로틀 / 디 바운스 기능을 필요로했으며, 호기심, 나는 이러한이 무엇인지 알고 싶어 그들이 어떻게 작동합니다.

6.여기에 내가 9LOC에 ES6에서 스로틀 기능을 구현하는 방법은, 그것은 도움이되기를 바랍니다

7.나는 몇 가지 조절 기능이있는 NPM 패키지를 만든 :

8.이러한 목적으로, 엠버에서 그것의 Backburner.js에 적합한 라이브러리가있다.

9.다음은 카스 포스트의 내 자신의 버전입니다 :

11.아래는 내가 13 LOC에, 생각할 수있는 가장 간단한 스로틀입니다. 그것은 시간 제한을 함수가 호출 될 때마다 생성하고 이전을 취소합니다. 예상대로 원래의 기능은 적절한 상황과 인수라고합니다.

13.나는 또한 당신이 전화를 알고 단 1 기능이있는 경우에 대한 간단한 솔루션을 제안 할 (예 : 검색)

14.

15.간단한 스로틀 기능 -

16.우리는 또한 플래그 -를 사용하여 구현할 수 있습니다

'JQUERY' 카테고리의 다른 글

티스토리툴바