자바스크립트 기능의 조절 및 흔들림 방지에 대한 자세한 설명-JS 튜토리얼-php.cn

자바스크립트 기능의 조절 및 흔들림 방지에 대한 자세한 설명

小云云

풀어 주다： 2017-12-21 09:12:59

원래의

2052명이 탐색했습니다.

이 글에서는 주로 JavaScript 함수의 조절(throttle) 및 흔들림 방지(debounce)를 소개합니다. 조절 및 흔들림 방지의 원리와 예를 자세히 소개하므로 관심이 있는 경우 학습할 수 있습니다. 더 많은 도움이 되길 바랍니다.

손떨림 방지 및 제한

크기 조정, 스크롤, 입력 상자 내용 확인 및 기타 창 작업 시 이러한 작업 처리 기능이 더 복잡하거나 페이지가 자주 다시 렌더링되는 경우, 이벤트 빈도가 높은 경우 트리거링은 무제한이므로 브라우저에 부담이 증가하고 매우 나쁜 사용자 경험으로 이어질 것입니다. 이때 디바운스(흔들림 방지)와 스로틀(throttle)을 사용하여 실제 효과에 영향을 주지 않고 트리거링 빈도를 줄일 수 있습니다.

이 두 가지는 프로젝트 최적화를 위해 나타나는데, 주로 짧은 시간 내에 지속적으로 실행되는 일부 이벤트로 인한 성능 저하 및 막대한 메모리 소비를 해결하기 위해 나타납니다. 일반적으로 짧은 시간 내에 지속적으로 트리거되는 스크롤 키업, 마우스 이동 크기 조정 등과 같이 많은 성능을 소비하며, 특히 DOM 구조를 변경하는 일부 작업

스로틀[스로틀] 및 흔들림 방지[디바운스] 이는 위에서 언급한 이벤트가 지속적인 트리거에서 지정된 이벤트까지 여러 번 트리거될 수 있도록 합니다. 수도꼭지에 물을 넣으면 밸브가 열리면 물이 아래로 흘러내립니다. 근면과 절약이라는 전통적 미덕에 따라, 바람직하게는 특정 패턴에 따라 특정 시간 간격 내에 수도꼭지의 물을 줄여야 합니다. 한 방울씩, 이것이 우리의 조절 개념입니다.

함수로 변경하고, setTimeout 메서드를 두 번 사용하고, 나중 시간에서 이전 시간을 뺀 다음 us 이 이벤트는 너무 일반적입니다. 다음 함수를 예로 들어보겠습니다.

/** 样式我就顺便写了 **/
<style>
 *{padding:0;margin:0;}
 .scroll-box{
  width : 100%;
  height : 500px;
  background:blue;
  overflow : auto;
 } 
 .scroll-item{
  height:1000px;
  width:100%;
 }
</style>

로그인 후 복사

- ------------

/** 先给定DOM结构;**/
<p class="scroll-box">
 <p class="scroll-item"></p>
</p>

로그인 후 복사

---------

/**主要看js,为了简单我用JQ去写了**/
<script>
 $(document).ready(function(){
  var scrollBox = $(&#39;.scroll-box&#39;);
  //调用throttle函数，传入相应的方法和规定的时间;
  var thro = throttle(throFun,300);
  //触发事件;
  scrollBox.on(&#39;scroll&#39; , function(){
   //调用执行函数;
   thro();
  })

  // 封装函数; 
  function throttle(method,time){
   var timer = null;
   var startTime = new Date();
   return function(){
    var context = this;
    var endTime = new Date();
    var resTime = endTime - startTime;
    //判断大于等于我们给的时间采取执行函数;
    if(resTime >= time){
     method.call(context);
     //执行完函数之后重置初始时间，等于最后一次触发的时间
     startTime = endTime;
    }
   }
  }
  function throFun(){
   console.log(&#39;success&#39;);
  }
 })
</script>

로그인 후 복사

위 함수를 전달하세요 , 지정된 대로 300밀리초마다 한 번씩 트리거되는 조절 효과를 얻을 수 있습니다. 물론 필요에 따라 시간을 맞춤 설정할 수 있습니다. 컴퓨터 양쪽에 광고창이 떠있는 것과 같은 작업을 해본 적이 있는지 궁금합니다. 스크롤바를 드래그하면 드래그로 인해 양쪽의 광고창이 계속해서 시도됩니다. 스크롤 막대를 중앙으로 이동하면 흔들리고 흔들리는 두 개의 창이 표시됩니다.

일반적으로 이를 지터라고 하며, 우리가 해야 할 일은 디바운스라고 하는 이러한 종류의 지터를 방지하는 것입니다. 여기서 흔들림 방지 아이디어는 드래그를 완료한 후 양쪽 창의 위치가 다시 계산된다는 것입니다. 이렇게 하면 보기에 부드럽고 편안하게 보일 것입니다. ;

페이지 성능을 최적화하고 메모리 소비를 줄입니다. 그렇지 않으면 IE와 같은 오래된 브라우저를 사용하는 경우 충돌이 발생할 수 있습니다.

서면 용어로 특정 이벤트가 끝나기 전에는 함수가 실행되지 않습니다. 종료되면 지연 시간을 준 다음 지정된 지연 시간 후에 함수를 실행합니다.

코드를 보세요.

//将上面的throttle函数替换为debounce函数;
function debounce(method,time){
 var timer = null ;
 return function(){
  var context = this;
  //在函数执行的时候先清除timer定时器;
  clearTimeout(timer);
  timer = setTimeout(function(){
   method.call(context);
  },time);
 }
}

로그인 후 복사

함수가 실행되기 전에 먼저 타이머를 지우는 것이 좋습니다. 함수가 계속 실행되면 작업이 완료될 때까지 함수가 계속 실행되지 않습니다. ;

실제로 쓰는 방식은 주로 아이디어에 관한 질문이 많습니다. 백그라운드 요청 확인처럼 손떨림 방지 기능을 사용할 수 있습니다. 그렇지 않으면 키보드를 누를 때마다 한 번 요청하면 너무 자주 요청하므로 키보드를 누르고 다시 요청하면 요청이 훨씬 줄어들고 성능이 저하됩니다.

resize 창 크기를 조정할 때 흔들림 방지 기술을 사용하거나 스트림

mousemove 마우스 이동 이벤트를 사용할 수 있습니다. 흔들림 방지 또는 조절을 사용할 수 있습니다.

스크롤 막대에 의해 발생되는 스크롤 이벤트는 물론 흔들림 방지 또는 제한을 사용할 수 있습니다.

연속 자주 발생하는 이벤트는 페이지 성능을 최적화하기 위해 이 두 가지 방법으로 해결할 수 있습니다. 귀하의 비즈니스 요구에 따라 다릅니다.