jQuery가 동일한 이벤트가 반복적으로 빠르게 트리거되는 것을 방지하는 방법

이제 동일한 이벤트가 빠르고 반복적으로 발생하는 것을 방지하는 jQuery 메서드를 공유하겠습니다. 매우 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

반복 트리거는 사용자가 데이터를 제출하기 위해 반복적으로 클릭하는 것을 방지하기 위한 것입니다. 일반적으로 클릭 후 응답이 없으면 다시 클릭합니다. 이는 사용자 경험 관점에서 수행되어야 할 뿐만 아니라 js 또는 php 프로그램 스크립트에서도 수행되어야 합니다. 사용자가 클릭이 서버에 제출되어 처리되고 있음을 알 수 있도록 이 반복되는 트리거 문제를 처리하기 위한 스크립트를 정리하겠습니다.

클릭과 같이 여러 번 이벤트가 빠르게 반복적으로 트리거되어 코드가 두 번 실행되어 많은 결과가 발생합니다. 현재 많은 솔루션이 있지만 거의 모두 제한 사항이 있습니다. 예를 들어 Ajax 양식에서 사용자가 한 번에 여러 번 클릭하는 것을 방지하는 경우 처음 클릭할 때 제출 버튼을 고정하고 다음에는 해제할 수 있습니다. 다시 클릭하는 것은 허용됩니다. 많은 사람들이 이렇게 하지만 다른 상황에서는 잘 작동하지 않습니다.

다음은 권장되는 좋은 방법입니다. 먼저 함수를 던져보세요.

var _timer = {}; 
function delay_till_last(id, fn, wait) { 
 if (_timer[id]) { 
  window.clearTimeout(_timer[id]); 
  delete _timer[id]; 
 } 
 
 return _timer[id] = window.setTimeout(function() { 
  fn(); 
  delete _timer[id]; 
 }, wait); 
}

사용방법

$dom.on('click', function() { 
 delay_till_last('id', function() {//注意 id 是唯一的 
  //响应事件 
 }, 300); 
});

위 코드는 클릭 후 300ms 동안 대기할 수 있으며, 300ms 이내에 다시 이벤트가 발생하면 마지막 클릭이 취소되고, 이를 반복합니다. 대기가 완료될 때까지 300밀리초 동안 기다린 후 이벤트에 응답하세요.

이 기능은 초점이 맞지 않을 때까지 기다리지 않고 입력된 이메일 주소를 기반으로 실시간으로 입력을 확인하거나 아바타를 끌어오는 등 매우 유용합니다.

예

Button BUTTON 클래스

a Label 클래스

첫 번째 상황의 경우 버튼에는 클릭 가능 여부를 제어할 수 없도록 비활성화된 속성이 있습니다

<input type="button" value="Click" id="subBtn"/> 
<script type="text/javascript"> 
function myFunc(){ 
 //code 
 //执行某段代码后可选择移除disabled属性，让button可以再次被点击 
 $("#subBtn").removeAttr("disabled"); 
} 
$("#subBtn").click(function(){ 
 //让button无法再次点击 
 $(this).attr("disabled","disabled"); 
 //执行其它代码，比如提交事件等 
 myFunc(); 
}); 
</script>

위 내용은 제가 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

vue2.0.js를 사용하여 다단계 연결 선택기 구현

mint-ui를 사용하여 지방 및 자치단체에서 3단계 연결 효과 구현

vue를 사용하여 보조 경로 구현 설정 방법

위 내용은 jQuery가 동일한 이벤트가 반복적으로 빠르게 트리거되는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!