점프와 흐름 절약: 종합 지침

카탈로그

Debounce

Closure

Function.Apply()

setTimeout()

Debounce use cases

Throttle

Throttle use cases

클라이언트 최적화에 대해 말하자면 떨림과 흐름 절약은 모든 웹 개발자가 반드시 갖추어야 할 가장 중요한 기술 중의 하나이다
그들의 공구 상자 안에 있다.웹 개발에는 UI/UX만 포함되지 않기 때문이다.우리는 우리도 최적화하고 있다는 것을 영원히 기억해야 한다
우리의 코드는 클라이언트와 서버의 자원 사용을 줄일 수 있다.잡담 그만해!자, 시작합시다.

탈온스

예: Codesandbox
우선 Bounce에 대한 이해를 높이기 위해 예시적인 장면을 살펴보자.상상해 보아라, 너는 반드시 검색란을 최적화해야 한다.
누군가가 검색란을 입력할 때 클라이언트가 요청을 하고 데이터를 얻습니다. 이것이 책 목록이라고 가정하면
그러나 여기에 함정이 하나 있다. 사용자가 계속 입력할 때, 우리의 검색 기능은 즉시 요청을 보내고 얻을 것이다. 참고로, 이것은 잘못된 방법이 아니지만, 우리 사용자에게 너무 많은 부담을 줄 수 있다.
백엔드 서비스.현재, Google 서비스는 사용자가 입력을 끝낼 때까지 모든 시간을 가져야 하기 때문입니다. 이것은 클라이언트와 서버에 비싼 것입니다.

예.

const debounce = (func, wait, immediate, args) => {
  let timeout;
  return () => {
    const callNow = immediate && !timeout;
    if (callNow) func.apply(null, args);

    const later = () => {
      timeout = undefined;
      if (!immediate) func.apply(null, args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

const myEfficientFn = debounce(function () {
  console.log('Costly calculations.');
}, 1000);

window.addEventListener('resize', myEfficientFn);

이 예에서 창 크기 조절의 영향을 없애려고 합니다.우리 debounce 함수는 몇 개의 매개 변수만 받아들인다. 예를 들어 afunc는
함수, 우리는 필요한 시간이 지나면 호출할 것이다wait,immediate 떨리는 함수를 기다리지 않기 위해 우리는 true와args를 전달하여 추가 매개 변수를 전달할 것이다.
우리에게 전달되는 내재적인 기능.
그리고 우리는 우리의 closure에 대한 정의timeout가 필요하다.방문할 수 있을 것 같습니다 timeout내부 함수에서만 호출할 수 있고, 자신을 다른 함수에 전달해야 한다.아래의 이 예를 고려해 보자.

닫기

const add = () => {
  let total = 0;
  return (a, b) => {
    console.log('Total value', total);
    total += a + b;
    return total;
  };
};

const letsAdd = add();
console.log(letsAdd(1, 2)); // Returns 3
console.log(letsAdd(4, 5)); // Returns 12

만약 그것이 일반적인 함수라면, 첫 번째는 3, 두 번째는 9 를 되돌려주지만, 두 번째는 12를 되돌려준다. 왜냐하면 우리는 총수를 더해야 하기 때문이다
패킷 닫기와 lexical scopes 때문에 함수 호출 사이에 끊임없이 저장됩니다.
이것이 바로 우리가 정의한 이유timeout의 원인이다.그것을 잊지 마라.그리고 내부 함수에서 사용자가 통과했는지 확인immediate하고 사실이라면 확인합니다.
만약 우리의 timeout 값이 있다면, 우리는 즉시 func.apply 함수를 호출할 것이다.

기능적용()

Math.max(1, 2, 3, 4); // Will return 3

Math.max.apply(null, [1, 2, 3, 4]); // Will also return 3

만약 내가 간단하게 설명해야 한다면func.apply(): 자바스크립트 그룹에 max()라는 방법이 없기 때문이다.
최대치를 찾기 위해서, 우리는 그룹을 교체하거나, apply를 사용합니다.만약 첫 번째 파라미터가 함수에 적용된다면 그것은 중요하지 않다.
그러나 객체에 적용할 때 사용됩니다.또 다른 예는 다음과 같다.

const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

만약 수조 추출을 사용해야 한다면, 우선 그것을 교체한 다음에 하나하나 요소를 추출해야 한다.그래서 교체를 피하려면 apply를 사용합니다.그리고 우리는 또 사용했다
첫 번째 논점.우리는 상하문이 필요하기 때문이다.우리는 elements 수조를 array 로 미룰 것이다.네, 방금 전의 내용을 계속합시다.
그래서 만약 그것immediate이 들어오지 않았다면 우리는 우리setTimeout()로 돌아갔을 것이다.빠른 알림setTimeout()

setTimeout（）

setTimeout(() => console.log('Hello World!'), 2000);

2000ms 후에 인쇄됩니다Hello World!.통상적으로 사람들이 일을 늦추려고 할 때setTimeout()가 사용된다.
우리가 전화하기 전에setTimeout()먼저 전화하자clearTimeout().함수 앞에서 창 크기를 조정한 경우
완성한 후에 다른 온스 제거 방법이 작동될 것이다.따라서 이러한 상황을 피하기 위해서, 우리는 clearTimeout() 를 사용하여 미완성 호출이 없음을 확보합니다.마지막으로, 우리는 기다릴 뿐setTimeout()패스워드later()를 호출하기 위해 func 함수를 완성하고 호출합니다.

Debounce 예:

사용자가 입력을 멈추기 전에 axios 요청을 보내지 마십시오.

사용자가 드래그할 때 아무 일도 하지 마세요.

사용자가 창 크기 조정을 중지할 때까지 기다립니다.

스로틀 밸브

예: Codesandbox
밸브는 온스 밸브와 약간 비슷한 점이 있지만, 밸브는 또 다른 야수이다.탈온스와 달리 액셀러레이터는 주어진 시간 내에 일정량의 조작만 허용한다.
예컨대 위의 예.그러나 debounce는 절차가 먼저 끝난 후에야 대가가 높은 계산을 계속할 것이다.

예.

const throttle = (func, duration) => {
  let shouldWait = false;
  return (...args) => {
    if (!shouldWait) {
      func.apply(null, args);
      shouldWait = true;
      setTimeout(function () {
        shouldWait = false;
      }, duration);
    }
  };
};

이 함수는 debounce와 유사해 보이지만, 함수가 호출되었을 때 호출되지 않도록 함수 호출 사이에 브리 변수를 저장합니다.
그리고 이 함수를 적용한 후, 우리는 shouldWaittrue로 전환할 것입니다.일정 시간 후, 여기에서 인용 duration 하고, shouldWait 을false로 전환throttle 함수를 호출할 수 있도록 합니다.

액셀러레이터 용례:

사용자가 스팸메일을 보낼 수 없도록 비활성화 버튼을 클릭합니다.

마우스 이동 후 흐름 감소

API 호출을 제한합니다.

읽어주셔서 감사합니다.🥳🥳🥳.