jQuery - 等待變量更新，然後觸發警報

Question

這可能是一個非常基本的問題，但我似乎無法找到正確的答案。如何在觸發警報之前等待變量更新？我讀了我想使用回調，但有兩個函數，所以我不知道如何使用回調，當我有一個「全局」警報。

現在警報被觸發爲空，因爲變量沒有更新。

var WaardeStrafblad = "" 
    var WaardeVerzekering = "" 

    $('input:checkbox[id=Strafblad]').change(function() { 

      if ($("#Strafblad").is(":checked")) { 

      WaardeStrafblad = "Ik heb geen strafblad" 

      } else { 

      WaardeStrafblad = "" 

      } 

     }); 

     $('input:checkbox[id=Verzekering]').change(function() { 

      if ($("#Verzekering").is(":checked")) { 

      WaardeVerzekering = "Ik ben bereid een verzekering af te sluiten" 

      } else { 

      WaardeVerzekering = "" 

      } 

     }); 

$("#Strafblad").click(function(){ 
    alert(WaardeStrafblad + " " + WaardeVerzekering); 
}); 

Answer 1

這裏沒有什麼東西。首先，最好使用不太複雜的jQuery選擇器，特別是如果您的元素具有id屬性。這是更快，更容易犯錯誤，所以我會改變這樣的代碼：

var WaardeStrafblad = ""; 
var WaardeVerzekering = ""; 

$("#Strafblad").change(function() { 
    if ($("#Strafblad").is(":checked")) { 
    WaardeStrafblad = "Ik heb geen strafblad"; 
    } else { 
    WaardeStrafblad = ""; 
    } 
}); 

$("#Verzekering").change(function() { 
    if ($("#Verzekering").is(":checked")) { 
    WaardeVerzekering = "Ik ben bereid een verzekering af te sluiten"; 
    } else { 
    WaardeVerzekering = ""; 
    } 
}); 

$("#Strafblad").click(function() { 
    alert(WaardeStrafblad + " " + WaardeVerzekering); 
}); 

注意我們不再檢查，如果我們已經知道了id沒有必要指定它的類型的inputcheckbox。

失敗的原因是，點擊收聽後更改偵聽火災，所以它會如預期只打印如果您單擊Strafblad複選框後，您已經檢查Verzekering（或者如果它是你的第二個點擊Strafblad）。

由於點擊聽者也會火上的改變，簡單擺脫監聽器和報警電話添加到更改偵聽年底Strafblad像這樣：

var WaardeStrafblad = ""; 
var WaardeVerzekering = ""; 

$("#Strafblad").change(function() { 
    if ($("#Strafblad").is(":checked")) { 
    WaardeStrafblad = "Ik heb geen strafblad"; 
    } else { 
    WaardeStrafblad = ""; 
    } 
    alert(WaardeStrafblad + " " + WaardeVerzekering); 
}); 

$("#Verzekering").change(function() { 
    if ($("#Verzekering").is(":checked")) { 
    WaardeVerzekering = "Ik ben bereid een verzekering af te sluiten"; 
    } else { 
    WaardeVerzekering = ""; 
    } 
}); 

或許也應該走在其他聽衆的結束，但不幸的是我不明白的語言，所以我只是給你一個最小的解決方案:)

Here is a working example

Answer 2

有幾種方法可以在那裏做。您可以將click事件註冊包括在檢查複選框後運行的if/then中。

但是，在這種情況下，我認爲這是簡單的只是包裝在if/then的alert兩個變量的測試和不顯示alert除非他們倆都被初始化：

var WaardeStrafblad = "" 
 
    var WaardeVerzekering = "" 
 

 
    $('input:checkbox[id=Strafblad]').change(function() { 
 
     if ($("#Strafblad").is(":checked")) { 
 
     WaardeStrafblad = "Ik heb geen strafblad" 
 
     } else { 
 
     WaardeStrafblad = "" 
 
     } 
 

 
    }); 
 

 
    $('input:checkbox[id=Verzekering]').change(function() { 
 
     if ($("#Verzekering").is(":checked")) { 
 
     WaardeVerzekering = "Ik ben bereid een verzekering af te sluiten" 
 
     } else { 
 
     WaardeVerzekering = "" 
 
     } 
 

 
    }); 
 

 
    $("#Strafblad").click(function(){ 
 
     // Just check that both variables are not empty 
 
     if(WaardeStrafblad && WaardeVerzekering){ 
 
     alert(WaardeStrafblad + " " + WaardeVerzekering); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="Strafblad"> Strafblad 
 
<input type="checkbox" id="Verzekering"> Strafblad

Answer 3

可以使用超時功能，延緩點擊功能的執行

$("#Strafblad").click(function(){ 
    setTimeout(" alert(WaardeStrafblad + " " + WaardeVerzekering);", 2000); 
}); 

或者你可以在最後觸發內部變化。

Answer 4

您必須存儲元素融入一個變量。
接下來創建一個函數來檢查每個元素是否被填充。

你的代碼應該是：

// this order of the object define the output order 
 
var Waarde = { 
 
    Strafblad: "", 
 
    Verzekering: "" 
 
}; 
 

 
var elements = $('#Strafblad, #Verzekering'); 
 

 
elements.change(function() { 
 

 
    if ($(this).is(":checked")) { 
 
    Waarde[$(this).attr('id')] = $(this).val(); 
 

 
    if (checkforFilledObject(Waarde)) { 
 
     alert(outputElements(Waarde)); 
 
    } 
 
    } else { 
 
    Waarde[$(this).attr('id')] = ""; 
 
    } 
 

 
    console.log(Waarde); 
 
}); 
 

 
function checkforFilledObject(values) { 
 
    var filled = true; 
 
    $.each(values, function(i, value) { 
 
    if (value === "") { 
 
     filled = false; 
 
    } 
 
    }); 
 

 
    return filled; 
 
} 
 

 
function outputElements(values) { 
 
    var valueArrays = Object.keys(values).map(function(key) { 
 
    return values[key]; 
 
    }); 
 
    return valueArrays.join(' '); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="Strafblad" value="Ik heb geen strafblad"> Strafblad 
 
<input type="checkbox" id="Verzekering" value="Ik ben bereid een verzekering af te sluiten"> Strafblad