jQuery回調與變量範圍和功能混淆？

早安人 - 我一直有這個問題好幾個小時，我無法隔離它。jQuery回調與變量範圍和功能混淆？

我這片jQueryzed JavaScript代碼：

 
jQuery(document).ready(function() { 
    var validated = 1; 

    jQuery('#help_continue').click(function() { 
     jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() { 
      jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible'); 
      jQuery('#step' + (validated + 1) + '_help').addClass('visible'); 
      jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'}); 
      jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200); 
     }); 
    }); 
});

都好，沒有什麼太花哨。如果綁定到HTML，則按預期工作。

的事情是，當我加入這個進來：

 
jQuery(document).ready(function() { 
    var validated = 1; 

    jQuery('#help_continue').click(function() { 
     jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() { 
      jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible'); 
      jQuery('#step' + (validated + 1) + '_help').addClass('visible'); 
      jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'}); 
      jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200); alert(validated); // this... 
     }); 
     validated++; // ...and this. 
    }); 
});

兩次顯示的警告，與「驗證」變量從未= 1裏面的功能 - 始終2.

我當然不是JavaScript專家，但我絕對知道這只是錯誤的，除非我錯過了一些東西。我來自PHP背景，我知道JavaScript有它的特質，但這很奇怪。

我使用jQuery 1.5，如果它很重要。任何人都知道發生了什麼？

來源

2011-02-12 AeroCross

您作爲回調傳遞給fadeOut的代碼僅在〜200ms超時後執行。但是代碼沒有被阻塞。即點擊處理程序中的所有內容，即在調用fadeOut之後的語句，都立即執行。

jQuery('#help_continue').click(function() { 
    // first 
    jQuery('....').fadeOut(200, function() { 
     // second 
    }); 
    validated++; // first 
});

但這不應該顯示警告兩次...無論如何，如果你想隨着點擊validate，但它應該有正確的值時，fadeOut回調被調用，您可以用這樣做即時功能：

jQuery('#help_continue').click(function() {  
    (function(validated) { 
     jQuery('....').fadeOut(200, function() { 
      // ... 
     }); 
    }(validated)); 
    validated++; 
});

來源

2011-02-12 06:38:00

你是說，驗證的++是在觸發點擊處理程序的同時執行的，而不是在動畫完成後執行？此外，我不知道警報發生了什麼 - 我嘗試在淡入淡出後設置驗證的++，但仍然沒有任何結果。 – AeroCross 2011-02-12 06:45:57

jQuery回調與變量範圍和功能混淆？

回答

相關問題