Javascriptバインドとアンバインドの関数呼び出し

Question

jqueryの次のコードがあります。私がやろうとしている何

$(document).ready(function() { 
    console.log('Hello'); 

    var uploadButton = $('#upload-button'); 

    uploadButton.on('click', function() { 
     uploadButton.unbind('click'); 
     progressBar(); 
     uploadButton.bind('click'); 
    }); 

}); 

function progressBar(){ 

    var element = document.getElementById('bar'); 
    var width = 1; 
    var id = setInterval(addFrame, 25); 

    function addFrame() { 
     if(width == 100){ 
      clearInterval(id); 

      element.style.width = 0; 
      return true; 
     } 

     width += 1; 
     element.style.width = width + '%'; 
    } 

} 

はHTML button項目が押されているとき進捗バットのための関数を呼び出すだけでなく、現在の通話が終了するまで呼び出し、もはや無効にしようとすることです。最初のアイデアは、それが押されているときにclickイベントをバインド解除し、その関数を実行してから同じ要素に再度clickをバインドすることでしたが、これまでのところ唯一のものはprogressBarの呼び出しであり、その後はbuttonclickのためにバインドされていません。
何が間違っていますか？
ありがとうございます。

Answer 1

コードの問題はアンバインドメソッドです。このメソッドはイベントをオン/オフにしません。それ以外の場合は、ボタンに関連付けられた関数を削除します。アンバインドはそれを解決する方法ではありません。一時的に削除しのために は私がこれを行うことをお勧めイベントをクリックします。

• は$('#myButton').prop('disabled', true)

• を使用してHTMLボタンを無効にして、$('#myButton').prop('disabled', false)

を使用した後のプログレスバー機能のコールバック関数で、それを有効にします

これがあなたを助けてくれることを願っています。

Answer 2

私は答えを自分で見つけました。propです。

$(document).ready(function() { 
    console.log('Hello'); 

    var uploadButton = $('#upload-button'); 

    uploadButton.on('click', function() { 
     console.log('clicked'); 
     progressBar(uploadButton); 
    }); 

}); 

function progressBar(target){ 

    target.prop('disabled', true); 

    var element = document.getElementById('bar'); 
    var width = 1; 
    var id = setInterval(addFrame, 25); 

    function addFrame() { 
     if(width == 99){ 
      clearInterval(id); 
      element.style.width = 0 + '%'; 

      target.prop('disabled', false); 
     } 

     //make it to display actual file upload 

     width += 1; 
     element.style.width = width + '%'; 
    } 
} 

オブジェクトをパラメータとして渡すと、そのオブジェクトを無効にして操作を行い、その後で有効にできました。他の属性も使用できます。