CODEWITHSUNDEEP
javascriptjquerycallback
Sumeet Kumar Yadav
Sumeet Kumar Yadav

Reputation: 12945

Callback in click event

I am having some trouble with calling callback inside click event . Firstly I am registering click event on each tr .

jQuery(tr).click(function (event) {
    var that = this;
    A(event, that, function () {
        var $gantt_container = $('#gantt_container'),
            gantt = ($gantt_container.data("GanttControl") || 
                      $gantt_container.data("radiantqGanttControl"));
        gantt.UpdateDatasource();
        return;
    });
});

In method call to A , I’m passing function as an argument .

var A = function (event, that, B) {
    var activity = event.currentTarget['data-grid-item'].Activity;
    if (event.target.type !== 'checkbox') {
        jQuery(':checkbox', that).trigger('click');
    }
    if (jQuery(':checkbox', that)[0].checked == false) {
        jQuery(this).removeClass('ui-selected ui-state-active');
        activity.DataSource['checkbox'] = '<input class="tandtCheckbox" entityType = "' + activity.DataSource.type + '"  status="' + activity.DataSource.status + '" name="' + activity.DataSource.name + '" projectId="' + activity.DataSource.projectId + '" type="checkbox" id="' + activity.DataSource.taskId + '" mileStone="' + activity.DataSource.mileStone + '" >';
    } else {
        activity.DataSource['checkbox'] = '<input checked class="tandtCheckbox" entityType = "' + activity.DataSource.type + '"  status="' + activity.DataSource.status + '" name="' + activity.DataSource.name + '" projectId="' + activity.DataSource.projectId + '" type="checkbox" id="' + activity.DataSource.taskId + '" mileStone="' + activity.DataSource.mileStone + '" >';
    }
    B();
    return;
};

I wanted to execute passed function to behave like callback , where method A should not wait for function B to return .

But ,this is not behaving as I expected . Method call A is waiting for B to return .

I am new to JavaScript /callback need your expert advice on how to make function B call as callback .

Upvotes: 1

Views: 793

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your terminology is a little off, a callback is supposed to run after other logic is completed - which is what is happening here. What you want is asynchronous logic.

You can either separate your logic:

A(event, that);
B();

function B() {
    var $gantt_container = $('#gantt_container'),
        gantt = ($gantt_container.data("GanttControl") || 
                  $gantt_container.data("radiantqGanttControl"));
    gantt.UpdateDatasource();
    return;
});

var A = function (event, that) {
    // your code...
}

Or you can use setTimeout to force paralellism, although this is slightly 'hacky':

var A = function (event, that, B) {
    // your code...
    setTimeout(B, 0);
    return;
};

Upvotes: 4

Arun P Johny
Arun P Johny

Reputation: 388316

You can use a simple setTimeout() to do it like

setTimeout(B, 0);

When you call B() it is a synchronized call, where the execution control is passed to B and it will be returned to A only after B is executed. When you use setTimeout() the execution of the passed B is passed to the timer which will take up when the current execution is completed.

Javscript Timers

Upvotes: 1

Related Questions