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

시도 뭔가 : 당신이 실제로 버튼이 clickFunction에 넣어, 클릭 할 때 발생하는 것이

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 
}

출처

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에서 흐림 및 클릭 이벤트 동기화

답변

관련 문제