JQuery 버튼 수행시간동안 disabled

개요

jQuery 버튼 수행시간동안 disabled

• 버튼 클릭시 어떤 작업을 하는 동안 버튼을 disabled로 하고 싶다.
• 또 작업이 끝나면 버튼을 enabled로 하고 싶다.
• 자바스크립트는 단일스레드로 처리되므로 onclick시에 'disabled 적용 → 작업 → enabled 적용'으로 구현하더라도 onclick 전체가 끝나기 전까지 화면에 반영(렌더링)되지 않는다.
• 그래서 여기서는 onclick에서는 disabled 적용·렌더링만 수행하고, 실제 작업은 setTimeout()을 이용해 별개의 흐름을 만들어 분리시켰다.

<style>
button { width: 300px; height: 50px; }
button:disabled { background: #fee; border: 0 }
</style>

<button id='my-btn'>수행</button>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  function process() {
    // 실제 작업 처리
    console.log('data processing job takes 2 seconds...');
    ts1 = new Date().getTime() + 2000;
    do { ts2 = new Date().getTime(); } while (ts2 < ts1);
    // 버튼 활성화
    $('#my-btn').prop('disabled', false);
  }

  $(function() {
    $('#my-btn').click(function() {
      // 버튼 비활성화
      $('#my-btn').prop('disabled', true);
      setTimeout(process, 0);
    });
  });
</script>