자바스크립트 지연실행 구현 방법(setTimeout)_javascript 기술

1. 지연된 탭 전환
요구 사항: 페이지에 탭이 여러 개 있으면 탭 전환 시 특정 영역의 데이터를 가져와 업데이트합니다.
단점: 사용자가 첫 번째 탭에서 끝까지 빠르게 전환하면 n개의 ajax 요청이 생성됩니다. 실제로 사용자는 마지막 탭의 데이터만 보면 됩니다.

코드 복사 코드는 다음과 같습니다.

varchangeTab = function(){
var timeId = 0;
return function(tabId){
if(timeId){
clearTimeout(timeId)
timeId=0;
setTimeout(function() {
//ajax do what
},500);
}();


탭에서 onmouseover를 바인딩합니다. 사용자는 계속 탭을 앞뒤로 전환하며 ajax 요청은 실행되지 않습니다. 500밀리초 후에만 실행됩니다. 500밀리초는 실제로 매우 짧으며 기본적으로 사용자 경험에 영향을 미치지 않습니다.

2. 지연된 자동 완성
요구 사항: 텍스트 입력 상자에서 사용자 입력을 모니터링하여 자동 완성 기능을 구현합니다.
단점: 사용자가 문자를 입력할 때마다 ajax 요청이 생성됩니다. 사용자가 계속해서 긴 문자열을 입력하면 요청 수가 많아집니다. 실제로는 마지막 요청이 사용자에게 필요합니다. . 코드는 위의 예시와 유사합니다.


3. 지연된 스크롤
요구 사항: 페이지의 광고는 사용자가 스크롤하는 모든 위치를 따라야 합니다.
단점: 사용자가 하단으로 스크롤하면 광고 위치를 N번 변경하는 기능이 실행됩니다. 실제로 사용자가 중지할 때 한 번만 트리거하면 됩니다. 코드는 1과 비슷합니다.

사실 이러한 예는 많습니다. 즉시 실행할 필요가 없는 경우도 있지만 시간이 매우 짧고 사용자 경험에 영향을 미치지 않습니다. 불필요한 소비가 많다.