Prevent more tap events on a listview (once tapped)

Question

I have a list of items in a listview. Clicking on one li sends a JSON request and opens a description page.

Since the opening of the description page takes 1 or 2 seconds there is time to click on another item in the list which then triggers more events, which I don't want. This eventually makes the scrolling (with iscrollview) messy with the bottom bar going up and down when going back to the list.

How can I stop listening to more taps on the listview while processing the opening of the description page?

Answer 1

Without any to look at, it's very difficult for us to help you.

However, the simplest method of avoiding this is to use a global variable as a flag.

You would set the global variable (ie: in the root-level of your JavaSCript file), as false:

tapProcessing = false;

Then, whenever you start processing you, check against this flag and - if not true, then process.

Here's a rudimentary example to show you what I mean:

$('.selector').click(function(e){
    if(!tapProcessing){
        //the function is not processing, therefore set the flag to true:
        tapProcessing = true;

        //do your load/etc, and reset the flag to false in the callback (when finished):
        $.get("test.php", function(data) {
            // process your data here
            // set your flag back to false:
            tapProcessing = false;
        });
    }else{
        //the function is already being processed from a previous click
    }
    e.preventDefault();  //assuming it's a link
});

Answer 2

Here are the bits of code I added :

el is my list, event is the landing page setting tapProcessing to false should only be done when "after the changePage() request has finished loading the page into the DOM and all page transition animations have completed" (JQM doc : http://jquerymobile.com/demos/1.2.0/docs/api/events.html )

$('#el').click(function(e){
    if(tapProcessing) {
        alert('prevent');
        e.preventDefault();  //assuming it's a link
    } else {
        alert('oktap');
        tapProcessing = true;
    }
});

$(document).bind("pagechange", function(event, options) {
if(options['toPage']['selector'] == '#event') {
        tapProcessing = false;
    }
});

I also set tapProcessing to false if I receive a disconnect event or on timeout.