javascript中的通用按鈕處理程序

我的web應用程序中有很多按鈕，它們向PHP請求和發佈數據以檢索和更新數據庫。我正在努力創建一種通用的方式來防止在提交表單時多次按下按鈕，因爲我使用的是AJAX和Jquery。javascript中的通用按鈕處理程序

這是我目前的實施，但我甚至不知道它是否工作。它似乎工作99％的時間。

在我的共同functions.js文件我有這個功能，這是在全球範圍內

var canClick = true; 

function buttonWithPromise(promise){ 
    if(!canClick) return; 
    canClick = false; 
    promise.done(function(){ 
     canClick = true; 
    }); 
}

那麼任何時候我附上。點擊DOM元素我不喜歡這樣寫道：

$('body').on('click', '.table > .row', function(){ 
    var nbr = $(this).attr('nbr'); 
    buttonWithPromise(get_count(nbr)); 
});

而一些可能被調用的函數將有一個延遲對象。

function get_count(){ 
    var defer = $.Deferred(); 
    var options = "getCount" 
    Query.init(options) 
     .fetchData(function(data){ //Ajax data request 
      if(data){ 
      } 
      defer.resolve(); 
    }); 
    return defer.promise(); 
}

由於這隻有時有效，我可以說它是錯的。任何改進建議？

來源

2014-11-24 user3822370

請定義您遇到的關鍵問題，以便有人可以幫助您。 – 2014-11-24 03:52:54

我不知道問題是什麼。它只有時有效。例如，如果我點擊某個請求數據列表的內容，但我沒有馬上得到它，那麼我將盡快獲取該數據，因爲我可以點擊。我試圖阻止這種情況，但似乎只是在某些時候才起作用。 – user3822370 2014-11-24 03:56:05

Javascript中的所有內容都是一個對象，是嗎？那麼，爲什麼不：

$('body').on('click', '.button', function() 
{ 
    // Set default value of property 
    if(typeof this.isClicked === 'undefined') 
     this.isClicked = false; 

    // Check if button is working 
    if(this.isClicked) 
    { 
     // Send error to console if button is busy 
     console.log('Cannot click as a network action is occuring!'); 
    }else 
    { 
     // Begin new network action if button is not busy 
     var self = this; 

     console.log('Begin network for: ' + $(this).text()); 
     this.isClicked = true; 

     setTimeout(function() 
        { 
         // Reset button state once network action is done 
         console.log('End network for: ' + $(self).text()); 
         self.isClicked = false; 

         //Call any callbacks/promises here 
        }, 5000); 
    } 
});

小提琴：

http://jsfiddle.net/mdLfug1t/

注：我使用的setTimeout來模擬一個Ajax請求

編輯：讓我把這個更多的來龍去脈：

function buttonWithPromise(promise) 
{ 
    if(typeof promise.canClick === 'undefined') 
     promise.canClick = true; 

    if(!promise.canClick) return; 

    promise.canClick = false; 

    promise.done(function() 
    { 
     promise.canClick = true; 
    }); 
}

您遇到的問題是「canClick」是全球性的，因此得到每一個承諾的修改。您需要將其作爲承諾的屬性，以便您可以創建無限的承諾，每個承諾都有自己的canClick實例。

來源

2014-11-24 04:00:49 teh1

謝謝我要試一試 – user3822370 2014-11-24 04:07:10

javascript中的通用按鈕處理程序

回答

相關問題