위 챗 애플 릿 의 사용 함수 떨 림 방지 와 함수 절 류

함수 떨 림 방지 와 함수 절 류 는 모두 상투적인 문제 이다.이 두 가지 방식 은 모두 js 의 성능 을 최적화 시 킬 수 있다.어떤 사람들 은 두 가지 개념 을 헷 갈 릴 수도 있다.그래서 나 는 이 두 개념의 의 미 를 자신의 이해 로 해석 했다.그리고 애플 릿 에서 이 두 가지 방법의 사용 을 열거 했다.
 
함수 떨 림 방지: 영어 debounce 는 역 점프 를 방지 한 다 는 뜻 으로 대체적으로 중복 트리거 를 방지 하 는 것 을 말한다.
그러면 함수 떨 림 방지, 진정한 의 미 는 지연 함수 집행 이다.즉, debounce 함수 가 얼마나 촉발 되 었 든 지 간 에 마지막 으로 debounce 함 수 를 촉발 할 때 만 setTimeout 을 정의 하고 간격 에 도달 해서 떨 림 방지 함 수 를 실행 합 니 다.
용도: input 상자 입력 에 많이 사용 되 며, 일치 하 는 입력 내용 을 표시 합 니 다.
 
함수 절 류: 영어 throttle 은 절 류 밸브 라 는 뜻 이 있 습 니 다.대개 촉발 빈 도 를 절약 한 다 는 뜻 이다.
그러면 함수 절 류 는 진정한 의 미 는 단위 시간 n 초 동안 처음으로 함 수 를 촉발 하고 집행 하 는 것 이다. 이후 n 초 동안 몇 번 을 촉발 하 든 실행 하지 않 는 다.다음 단위 시간 n 초 까지 처음으로 함 수 를 촉발 하고 실행 합 니 다. 이 n 초 동안 함수 가 몇 번 이 든 실행 하지 않 습 니 다.
용도: 페이지 스크롤 스크롤 이나 창 크기, 버튼 중복 클릭 방지 등에 많이 사 용 됩 니 다.
 
사실 제어 함수 가 촉발 하 는 주파수 만 으로 는 이 두 개념 을 구분 하기 어렵다.나 는 두 함수 가 중복 촉발 을 방지 하 는 기능 에 도달 할 수 있다 고 생각한다.그러나 함수 떨 림 방 지 는 n 초 후 지연 실행 입 니 다.함수 절 류 는 즉시 실행 하고 n 초 후에 바로 실행 합 니 다.
 
작은 프로그램 에서 함수 떨 림 방지, 함수 절 류 의 사용 방식:
일반적으로 이 두 가지 방법 을 공용 js 에 봉 한다.
tool.js

/*    */
function throttle(fn, interval) {
  var enterTime = 0;//     
  var gapTime = interval || 300 ;//    ，  interval  ，   300ms
  return function() {
    var context = this;
    var backTime = new Date();//     return      
    if (backTime - enterTime > gapTime) {
      fn.call(context,arguments);
      enterTime = backTime;//           ，              
    }
  };
}

/*    */
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000;//    ，  interval  ，   1000ms
  return function() {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//     arguments，  setTimeout    ，arguments         。
    timer = setTimeout(function() {
      fn.call(context,args);
    }, gapTime);
  };
}

export default {
  throttle,
  debounce
};

 사용:

import tool from "../../static/js/tool.js";
Page({
   data:{
    win_scrollTop:0
   },
   onPageScroll: tool.throttle(function(msg){
      this.setData({
        win_scrollTop: msg[0].scrollTop
      });
   }),
   gotoUnlock: tool.debounce(function() {
      this.saveUserInfo();
   }),
   saveUserInfo:function(){
      console.log(111)
   }
})

 
위의 두 가지 방식 은 단지 간소화 판 일 뿐, 아마도 어떤 상황 은 고려 하지 않 았 을 것 이 고, 이후 에 다시 최적화 되 었 을 것 이다.
 
함수 절 류 에 대한 설명:
(1) 처음 실 행 했 을 때 함 수 를 반드시 실행 할 수 있 습 니 다.
(2) 그리고 n 초 안에 두 번 째 트리거 를 할 때 첫 번 째 와 두 번 째 간격 이 설정 한 간격 이 부족 할 때 실행 하지 않 습 니 다.이후 세 번 째, 네 번 째 트리거 는 실행 되 지 않 았 다.
(3) n 초 후에 한 번 만 있 고 처음으로 함 수 를 다시 촉발 합 니 다.
 
함수 떨 림 방지 설명:
(1) 첫 번 째 트리거 함수 에서 타이머 가 정의 되 었 습 니 다.n 초 후에 실행 합 니 다.
(2) 그 다음 에 함수 가 두 번 째 로 촉발 되 었 을 때 폐쇄 적 인 특성 으로 인해 이때 timer 는 첫 번 째 트리거 시의 타이머 표지 가 되 었 습 니 다.그리고 첫 번 째 setTimeout 을 직접 지우 면 첫 번 째 setTimeout 의 내용 이 실행 되 지 않 습 니 다.그리고 두 번 째 setTimeout 을 정의 합 니 다.
(3) 그리고 두 번 째 단 계 를 반복 해서 계속 지우 고 계속 설정 합 니 다.함수 가 마지막 으로 실 행 될 때 까지 마지막 타 이 머 를 정의 하고 n 초 간격 으로 실 행 됩 니 다.
(4) 마지막 타이머 가 실행 되 지 않 았 을 때 함수 가 다시 촉발 되면 세 번 째 단 계 를 반복 합 니 다.설정 한 간격 에 해당 합 니 다. 함수 실행 을 지연 시 키 는 시간 일 뿐 몇 초 간격 으로 실행 하 는 것 이 아 닙 니 다.
 
여기까지 이 두 방식 의 차 이 는 매우 뚜렷 하 다.함수 절 류 는 함수 의 촉발 주파 수 를 줄 이 는 것 이 고 함수 떨 림 방지 는 지연 함수 의 집행 이 며 몇 번 을 촉발 하 든 마지막 한 번 만 실행한다.