元素上的click事件重复绑定解除绑定

Question

I'm kind of confused, I want to know binding and unbinding event on the same element is better or I should use a flag (something like 'inProgress').

I have a scenario where I have to prevent an operation or event from happening if one operation is already in process, for eg.

I have an anchor tag and I've bind an event to that anchor tag and that event handles some ajax functionality like fetching data and updating certain part of the page, what I want is to stop repeated click on the anchor tag from happening so that once the first click has happened on the anchor tag wait till the response comes from the server and the part of the page is updated, my confusion lies whether i should unbind the event once the click happens and bind the same handler again once the response is handled or should I setup a flag to check if any handler is in progress and set the flag false once the response is handled? which of the way would be efficient performance wise?

Any help/suggestion is much appreciated!

Thanks

Answer 1

use a flag!

it's better to use some boolean variable and check if you are allowed that action rather than calling bind and unbind (which is additional overhead).

if you use jQuery, you can use the data() to store data on that anchor.

like:

$('.testLink').on('click',function(){

    //reference link
    var link = $(this);

    //check data
    data = link.data('amIallowed');

    //if no data existed yet
    if(!data){

        //set data and make it false to prevent further requests
        link.data('amIallowed',{
            allowRequest : false
        });

        //lets do ajax
        doAjax();    
    }
    else{ //if there was data

        //and we were allowed
        if(data.allowRequest){
            doAjax(link);    
        }   
    }
});

//do ajax stuff here
function doAjax(link){
    $.post('url',{param:val},function(){

        //revert to true after request
        link.data('amIallowed',{
            allowRequest : true
        });

    });
}

if you don't use jQuery, you can still do the same feat using simple JS. jQuery uses " expando-properties " to bind data onto elements. if you can do with expando-props, use variables instead.