在JavaScript中同步模糊和單擊事件

我發現很難同步模糊和單擊事件。場景如下：我有一個頁面，其中有一個文本框和一個按鈕。現在我有一個模糊事件處理程序的文本框，這基本上是一個AJAX請求和更新頁面的一部分。此外，我有一個點擊處理按鈕，做一些其他工作。在JavaScript中同步模糊和單擊事件

現在這裏的問題是，因爲我在文本框上有模糊事件處理程序，所以當我在文本框中輸入某些內容並直接單擊該按鈕時，它會觸發模糊和單擊事件（如預期的那樣）。問題在於同步兩者，因爲點擊處理程序應該只在模糊處理程序返回時執行（如果有任何模糊事件）。

示例代碼如下：

$('#textbox').on('blur', function(){ 
//make an ajax request 
}); 

$('#btn').on('click',function(){ 
//wait for the blur event to finish(if any) 
// then execute the code 
})

來源

2012-10-17 vijay tyagi

嘗試這樣：

http://jsfiddle.net/8m7j5/2/

var blurring = []; 
var expecting = false; 

$(document).ready(function() { 
    $('#textbox').on('blur', function() { 
     // make an ajax request 

     console.log("TEXTBOX BLURRED"); 

     blurring.push(1); // Flag a new blur event 

     $.ajax({ 
      url: "/echo/json/", 
      complete: function() { 
       setTimeout(function() { // Simulate AJAX request taking 2 seconds 
        console.log("AJAX REQUEST COMPLETE"); 
        blurring.pop(); // Flag completed blur event 
        checkClick(); 
       }, 2000); 
      } 
     }); 
    }); 

    $('#btn').on('click', function() { 
     // wait for the blur event to finish(if any) 
     // then execute the code 

     console.log("ACTUALLY CLICKED BUTTON"); 

     expecting = true; 
     checkClick(); 
    }); 
}); 

function checkClick() { 
    if (expecting && blurring.length < 1) { 
     console.log("CHECKING: EXPECTING CLICK AND NO MORE BLUR EVENTS"); 
     expecting = false; 
     clickFunction(); 
    } else { 
     console.log("CHECKING: EITHER NOT EXPECTING OR BLUR EVENT(S) STILL OCCURRING"); 
    } 
} 

function clickFunction() { 
    console.log("EXECUTING CLICK FUNCTION"); 

    // Put your actual click code here 
}

你真正想要的是單擊按鈕時，放在clickFunction發生什麼。

來源

2012-10-17 18:17:22 Ian

雖然我一直在尋找能夠實際同步事件的東西，但是這暫時解決了問題，感謝ian和krypthonite對此進行了深入研究。但我仍然面臨jquery ui對話框的問題，這似乎阻止了click事件，實際上我正在展示一個由jquery ui對話框構成的加載器，而ajax正在進行，但是當我使用它時，click事件永遠不會被觸發，它似乎是阻止點擊事件，任何想法如何可以解決？ –

@vijaytyagi嗯，我認爲這是你可以做的最好的（我提出的邏輯，而不是確切的代碼）「同步」，因爲我沒有真正的同步，我知道。你的意思是點擊事件被「封鎖」了嗎？以什麼方式？你有沒有設置一個jsFiddle來演示你的場景？ – Ian

這裏是相同的http://jsfiddle.net/vjunloc/2Lw7S/3/小提琴 –

從ianpgall有點好轉代碼：

var functionsToCall = []; 
var ajaxRunning = false; 

$(document).ready(function(){ 
    $('#textbox').on('blur', function(){ 
     ajaxRunning = true; 
     console.log("START AJAX REQUEST"); 
     $.ajax({ 
      url: "/echo/json/", 
      complete: function() { 
       setTimeout(function() { // Simulate AJAX request taking 2 seconds 
        console.log("AJAX REQUEST COMPLETE"); 
        ajaxRunning = false; 
        fireStackedCalls(); 
       }, 5000); 
      } 
     }); 
    }) 

    $('#btn').on('click',function(){ 
     if(ajaxRunning === true) { 
      functionsToCall.push('clickFunction()'); 
     } else { 
      clickFunction(); 
     } 
    }); 

    function fireStackedCalls() { 
     while(functionsToCall.length > 0) { 
      toCall = functionsToCall.pop(); 
      eval(toCall); 
     } 
    } 

    function clickFunction() { 
     console.log("EXECUTING CLICK FUNCTION"); 

     // Put your actual click code here 
    } 
});

現在clickFunction的每一個電話記錄，如果Ajax請求完成後執行。

來源

2012-10-17 18:44:27 jovobe

在JavaScript中同步模糊和單擊事件

回答

相關問題