【发布时间】：2017-06-23 12:03:58
【问题描述】：
我有以下代码，它使用基本的选项链父/子关系显示和隐藏选择菜单。一旦发生变化，我需要调用一个函数。
目前我正在这样做，如下所示，为每个<select> 触发更改事件，然后调用该函数。在现实生活中，这是一个 ajax 调用，但这与问题无关。
我下面的代码有效。我想解决的问题是如何在不依赖更改事件的情况下完成此操作，因为它会不必要地多次触发该功能。我想在父级更改时简单地在$.each() 循环的末尾放置一个函数调用，但由于涉及的动画，它会失败，因为有问题的元素有时仍然可见/隐藏。我通过在每个 slideUp() 和 slideDown() 中放置一个回调来解决这个问题，但这正是我最终多次触发事件的确切原因。
我有一种强烈的感觉，我正在寻找的答案使用 jQuery promise()，其中指出：
.promise() 方法返回一个动态生成的 Promise，一旦绑定到集合的特定类型的所有操作（无论是否排队）都结束，该 Promise 就会被解析。
这正是我想要做的，但我完全被 promise() 弄糊涂了，这是正确的用法。我明白了这个概念，但我可以使用一些帮助来了解如何将所有这些更改事件排队到一个 promise() 中，然后在它们全部完成时调用我的函数。
$('select[data-parent="true"]').change(function() {
var parentValue = +this.value;
var parentId = $(this).data('parent_id');
$('div[data-parent_id="' + parentId + '"]').each(function() {
var parentValues = $(this).data('parent_values');
if (parentValues.indexOf(parentValue) !== -1) {
$(this).slideDown(1000, function() {
$(this).find('select').change();
});
} else {
$(this).slideUp(1000, function() {
$(this).find('select').change();
});
}
});
});
$('select').on('change', function() {
var results = '';
$('div.option').each(function() {
results += $(this).find('select').prop('name') + ' IS VISIBLE: ' + +$(this).is(':visible') + '<br>';
});
$('#results').html(results);
});div {
padding: 5px 10px;
}
div.child {
display: none
}
select {
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="option">
<select name="container" data-parent="true" data-parent_id="10">
<option value="">--- Select a container---</option>
<option value="1">Box</option>
<option value="2">Bag</option>
<option value="3">Pallet</option>
</select>
</div>
<div class="child option" data-parent_id="10" data-parent_values="[1]">
<select name="box color">
<option value="100">Red</option>
<option value="200">Blue</option>
</select>
</div>
<div class="child option" data-parent_id="10" data-parent_values="[2]">
<select name="bag color">
<option value="300">Green</option>
<option value="400">Yellow</option>
</select>
</div>
<div class="child option" data-parent_id="10" data-parent_values="[3]">
<select name="pallet color">
<option value="500">Black</option>
<option value="600">Yellow</option>
</select>
</div>
<div id="results">
</div>【问题讨论】：