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(num) {
    for (var i = 1; i <= num; i++) {
      console.log('processing ' + i);
      // sleep 1 sec
      ts1 = new Date().getTime() + 100;
      do ts2 = new Date().getTime(); while (ts2 < ts1);
    }
  }

  function async_job() {
    process(30);
    $('#my-btn').prop('disabled', false);
  }

  $(function() {
    $('#my-btn').click(function() {
      $('#my-btn').prop('disabled', true);
      setTimeout(async_job, 0);
    });
  });

</script>