Jquery禁用同步通話按鈕

我試圖禁用一個按鈕來防止在同步ajax調用中多次單擊。我的代碼如下。Jquery禁用同步通話按鈕

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <meta charset="UTF-8"> 
 
\t \t <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- optional font --> 
 
\t \t <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    \t \t <script type="text/javascript"> 
 
     $(document).ready(function(){ 
 
     \t var test = false; 
 
      $(document).on('click', '#test', function(e){ 
 
      \t console.log(test); 
 
      \t if (test) { 
 
      \t \t return; 
 
      \t } 
 
      \t test = true; 
 
       ajax_call(); 
 
    
 
      }); 
 

 
      function ajax_call() { 
 
      \t $.ajax({ 
 
        contentType: 'application/json;charset=utf-8', 
 
        type: 'POST', 
 
        url: 'https://validdomain', 
 
        dataType: 'json', 
 
        xhrFields: { 
 
         withCredentials: true 
 
        }, 
 
        crossDomain: true, 
 
        data: JSON.stringify({'test' : 'test'}), 
 
        success: function(data, textStatus, jqXHR) { 
 
         console.log(data);test =false; 
 
         copypaste(); 
 
         test = false; 
 
        }, 
 
        error: function(jqXHR, textStatus, errorThrown) { 
 
         console.log(textStatus); 
 
         
 
         test = false; 
 
        }, 
 
        async: false, 
 
       }); 
 
      } 
 

 
      function copypaste() { 
 
      \t var tempInput = document.createElement("textarea"); 
 
       tempInput.setAttribute('id', 'copyid'); 
 
       tempInput.style = "position: absolute; left: -1000px; top: -1000px"; 
 
       tempInput.value = 'Text Copied'; 
 
       console.log(tempInput); 
 
       document.body.appendChild(tempInput); 
 
       tempInput.select(); 
 
       var result = document.execCommand('copy'); 
 
       \t document.body.removeChild(tempInput); 
 
       if (result) { 
 
        alert('copied'); 
 
       } 
 
       else { 
 
       \t alert('not copied'); 
 
       } 
 

 
       return result; 
 
      } 
 

 
     }); 
 
    </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <input type="submit" id="test"/> 
 
\t </body> 
 
</html>

但我的按鈕沒有在第二次點擊禁用（我收到警報兩次）。如果我將ajax請求作爲異步調用，則禁用按鈕。有什麼辦法可以在同步調用期間禁用我的按鈕嗎？

在此先感謝！

來源

2017-07-12 savithraj

永遠不要使用'異步：FALSE'。這是一個糟糕的做法，並被瀏覽器供應商棄用。看看你的瀏覽器控制檯中的警告 – charlietfl

另外，如果你使用同步阿賈克斯，你不必禁用按鈕 – Musa

我知道這是一個可怕的選擇。但是我使用它，因爲如果從ajax回調函數觸發document.execCommand不起作用。所以我必須使用async：false，以便將我的copypaste（）函數移到ajax之外。 – savithraj

我添加了必要的語句，但你可以把它放到另一個地方，例如在ajax回調函數中。此外，我改變了async: false

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <meta charset="UTF-8"> 
 
\t \t <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- optional font --> 
 
\t \t <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    \t \t <script type="text/javascript"> 
 
     $(document).ready(function(){ 
 
     \t var test = false; 
 
      $(document).on('click', '#test', function(e){ 
 
      \t console.log(test); 
 
      \t if (test) { 
 
      \t \t return; 
 
      \t } 
 
      \t test = true; 
 
       ajax_call(); 
 
       //Try adding this statement you can add wherever you want 
 
       $(document).off('click', '#test'); 
 
    
 
      }); 
 

 
      function ajax_call() { 
 
      \t $.ajax({ 
 
        contentType: 'application/json;charset=utf-8', 
 
        type: 'POST', 
 
        url: 'https://validdomain', 
 
        dataType: 'json', 
 
        xhrFields: { 
 
         withCredentials: true 
 
        }, 
 
        crossDomain: true, 
 
        data: JSON.stringify({'test' : 'test'}), 
 
        success: function(data, textStatus, jqXHR) { 
 
         console.log(data);test =false; 
 
         copypaste(); 
 
         test = false; 
 
        }, 
 
        error: function(jqXHR, textStatus, errorThrown) { 
 
         console.log(textStatus); 
 
         
 
         test = false; 
 
        }, 
 
        async: true, 
 
       }); 
 
      } 
 

 
      function copypaste() { 
 
      \t var tempInput = document.createElement("textarea"); 
 
       tempInput.setAttribute('id', 'copyid'); 
 
       tempInput.style = "position: absolute; left: -1000px; top: -1000px"; 
 
       tempInput.value = 'Text Copied'; 
 
       console.log(tempInput); 
 
       document.body.appendChild(tempInput); 
 
       tempInput.select(); 
 
       var result = document.execCommand('copy'); 
 
       \t document.body.removeChild(tempInput); 
 
       if (result) { 
 
        alert('copied'); 
 
       } 
 
       else { 
 
       \t alert('not copied'); 
 
       } 
 

 
       return result; 
 
      } 
 

 
     }); 
 
    </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <input type="submit" id="test"/> 
 
\t </body> 
 
</html>

來源

2017-07-12 18:10:02

正如我在我的問題中提到的，如果我使用異步調用，這工作得很好。但是，如果從ajax（成功/錯誤）回調函數觸發document.execCommand不起作用。所以我必須使用async：false，以便將我的copypaste（）函數移到ajax之外。 – savithraj

你會看看那個帖子https://stackoverflow.com/questions/30712590/how-to-programmatically-copy-asynchronous-dependent-content-to-the-clipboard-fol –

是的，但我不喜歡那個因爲用戶必須等到超時時間才能得到響應。另一個缺點是，如果服務比我們的超時花費更多時間，那麼邏輯將會出錯。 – savithraj

爲什麼不乾脆禁用按鈕，並重新啓用它，而不是像聲明一個$("#test").attr('disabled','disabled')全局變量？變量作用域可能會在JavaScript中變得棘手。

來源

2017-07-12 18:31:17

是的，我們可以做到這一點。但仍然不能在同步調用中使用。 – savithraj

什麼不起作用？ –

你碰巧正在尋找這樣簡單的東西？

PS：您必須自己輸入ajax調用的詳細信息。

HTML

<button id="button">Button</button>

的jQuery/JS

$("#button").click(function(){ 
    console.log("clicked"); 
    // deactivate button 
    $("#button").attr("disabled", true); 
    ajaxCall(); 

}); 

function ajaxCall(){ 
    $.ajax({ 
    //...ajax call here, 
    complete: function(){ 
     // reactivate button after you receive any reply from ajax 
     $("#button").attr("disabled", false); 
    } 
    }) 
}

來源

2017-07-12 18:34:00 RMo

Jquery禁用同步通話按鈕

回答

相關問題