JavaScript 기능이 실행되는 동안 이미지로드

Question

은 JavaScript 기능이 실행되는 동안로드 이미지를 표시하는 방법입니다. 내가 jQuery를 - 아약스 기능 같은 것을 가질 수 있다면 좋을 텐데, 약 2~5초 소요 하나가

$("#loading").bind("ajaxStart", function(){ 
    $(this).attr("style", "visibility: visible") 
}).bind("ajaxStop", function(){ 
    $(this).attr("style", "visibility: hidden") 
}); 

설명 편집 :

아이디어는 그 때마다 자바 스크립트 함수가 실행되고 3/4 초가 걸리며 로딩 이미지가 표시됩니다. 이 Ajax 함수와는 아무런 관련이 없습니다. 항상 실행중인 JavaScript를 잡아서 타이밍을 정하는 것과 같은 원리입니다.

감사합니다.

Answer 1

그럼 ... 댓글을 달았다면 모든 것이 바뀝니다.

어떤 자바 스크립트도이 실행될 때 자동으로 표시되지 않도록 설정할 수 있습니다. 그러나 사용자 정의 이벤트를 사용하여 .trigger() 및 .bind()을 사용하여 jquery 사용자 정의 이벤트를 활용할 수 있습니다.

$("#Something").click(function() { 
    $('body').trigger('Custom.BeginWork'); 
    setTimeout(function() { DoWorkFunction(/* you can pass params here if you need */); }, 0); 
    // Causes it to be executed in the background 0ms from now 
}); 

function DoWorkFunction() { 
    // Stuff... 

    $('body').trigger('Custom.EndWork'); 
} 

그런 다음 많은 .ajaxStart() 및 .ajaxStop()

$('#Working').bind('Custom.StartWork', function() { 
    $(this).show(); 
}); 

$('#Working').bind('Custom.EndWork', function() { 
    $(this).hide(); 
}); 

같은 .bind() 이벤트를 등록 :

function myFunctionThatDoesSomething() { 
    $('body').trigger('Custom.BeginWork'); 

    // Do Something ... 

    $('body').trigger('Custom.EndWork'); 
} 

비록 장기 실행 작업은 아마 그래서 그들은 이벤트에서 차단되지 않는 비동기을 수행해야합니다

여기에 working jsFiddle Example입니다.

---

업데이트 : 당신은 이중 setTimeout을했습니다 your jsFiddle에서

. 다음은이가 번역 무엇

setTimeout(function() { 
     // Call Operation Here 
     try { setTimeout(function() { LongRunningOperation(10000); }, 1000); 
     } 
     finally 
     { 
      $("body").trigger('Custom.End'); 
     } 
    }, 50); // 50ms delay because some browsers *cough*IE*cough* are slow at rendering dom changes 

은 다음과 같습니다

는 그래서 Custom.End 이벤트가 완료하지 않을 경우, 실행 일정 장기 실행 기능 후 해고된다. setTimeout은 비동기이며 비 블로킹입니다.