동일한 이벤트가 반복적으로 발생하지 않도록 하는 방법

이번에는 동일한 이벤트가 반복적으로 발생하는 것을 방지하는 방법과 동일한 이벤트가 반복적으로 발생하는 것을 방지하기 위한 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

반복 트리거는 사용자가 데이터를 제출하기 위해 반복적으로 클릭하는 것을 방지하기 위한 것입니다. 일반적으로 클릭 후 응답이 없으면 다시 클릭합니다. 이는 사용자 경험 관점에서 수행되어야 할 뿐만 아니라 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>

당신은 이 기사를 읽었을 것입니다. 더 흥미로운 정보를 얻으려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

이미지 캐러셀 효과를 얻는 방법

j시간 숨기기 대화 상자를 구현하는 쿼리 방법

위 내용은 동일한 이벤트가 반복적으로 발생하지 않도록 하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!