如何在执行另一个功能之前等待一个功能完成

Question

I'm using selecter jquery . I initialize it by typing the code

$("select").selecter();

I need to make sure that the formstone selecter jquery library has completed before i start appending elements. So what i did is to is use the $.when function

initialize: function(){
    $.when($("select").selecter()).then(this.initOptions());
},

initOptions: function(){
    this.$el.find('.selecter').addClass('something');
}

But this does not work. How can i wait while formstone selecter is doing its thing before i execute another function?

Thanks,

UPDATE

Here's the update of what i did but it does not work.

initialize: function(){
   $("select").selecter({callback: this.initOptions });
},

initOptions: function(){
    this.$el.find('.selecter').addClass('something');
}

Answer 1

There is a callback option.

The function passed as a callback will receive the newly selected value as the first parameter

Should be $("select").selecter(callback: function() { alert('callback fired.') }); or as shown

$("select").selecter({
    callback: selectCallback
});

function selectCallback(value, index) {
    alert("VALUE: " + value + ", INDEX: " + index);
}

Answer 2

The problem which I think regarding the callback edited code is that this can refer to anything. Try the following code

var selectorObj = {
 initialize: function(){
    $("select").selecter({callback: selectorObj.initOptions });
    },
initOptions: function(){
    this.$el.find('.selecter').addClass('something');
     }
};

Created a working fiddler for you http://jsfiddle.net/6Bj6j/

The css is out of shape. Just select what is poping up when you click on the dropdown. You will get an alert which is written in the callback.

Answer 3

The problem with the provided snippet is the scope of the callback:

var selectorObj = {
    initialize: function(){
        $("select").selecter({ callback: selectorObj.initOptions });
    },
    initOptions: function(){
        // 'this' refers to the "$('.selecter')" jQuery element
        this.addClass('something');
    }
};

However if you just need to add a class to the rendered element, you should use the 'customClass' option:

$("select").selecter({
    customClass: "something"
});

If you need to do more, you can always access the Selecter element directly:

var $selecter = $("select").selecter().next(".selecter");

$selecter.addClass("something").find(".selecter-selected").trigger("click");

Sidenote: I'm the main developer of Formstone. If you have any suggestions for new features or better implementation, just open a new issue on GitHub.