javascript - 为什么这段代码中的 for 循环在 Jquery Selector 之前执行？

Question

在下面的代码中，for 循环始终首先执行，jQuery 选择器稍后执行。但我想在更改所选 slider 的值后运行此 for 循环。

$('div[name="FirstSliderselector"]').slider('value', $("#MasterSlider").slider("value"));
var FirstSliders = $('div[name="FirstSliderselector"]');
for (var i = 0; i < FirstSliders.length; i++) {
     console.log('for loop executed');
}

Answer 1

进行编辑以反射(reflect)对该问题的新理解

您想要做的是为更改事件传递一个回调函数，如下所示:

我现在的理解是，当你改变 slider 的值时，你想触发一个改变事件。您可以通过以下方式以编程方式设置该值:

$('div[name="FirstSliderselector"]').slider('value', $('#MasterSlider').slider('value'));

为了让 for 循环在完成此操作后执行，您需要将更改事件绑定(bind)到 slider ，如下所示:

$('div[name="FirstSliderselector"]').slider({
    change: function (event, ui) {
        var firstSliders = $('div[name="FirstSliderselector"]'),
            i;
        for (i = 0; i < firstSliders.length; i += 1) {
            console.log(ui.value);
        }
    }
});

你也可以这样做:

$('div[name="FirstSliderselector"]').on('slidechange', function (event, ui) {
    var firstSliders = $('div[name="FirstSliderselector"]'),
        i;
    for (i = 0; i < firstSliders.length; i += 1) {
        console.log(ui.value);
    }
});

如果您想确保仅在以编程方式完成值更改时触发此操作，而不是在 slider 滑动后触发，则您的回调函数将变为:

function (event, ui) {
    if (!event.originalEvent) {
        var firstSliders = $('div[name="FirstSliderselector"]'),
            i;
        for (i = 0; i < firstSliders.length; i += 1) {
            console.log(ui.value);
        }
    }
}

最后，如果这些都不能满足您的需求，那么正如 Chris GW Green 所建议的，“完成时”结构总是存在:

$.when($('div[name="FirstSliderselector"]').slider('value', $('#MasterSlider').slider('value'));).then(function () {
    var firstSliders = $('div[name="FirstSliderselector"]'),
        i;
    for (i = 0; i < firstSliders.length; i += 1) {
        console.log('for loop executed');
    }
});