Question

When clicking out of an input field, I’m executing some jquery. If I click in and out really quickly it screws everything up. How can I let the current operation finish before starting a new one?

$("#title, #desc").focus(function() {

}).blur(function() {

    var frameHtml = $('.liveDemoFrame').html();
    var liveDemoFrame = $('.liveDemoFrame');
    var previewFrame = $('#previewFrame');

    previewFrame.remove();
    liveDemoFrame.append(frameHtml).hide();
    $('#previewFrame').hide();
    liveDemoFrame.show().append('<p id="loading">Loading...</p>');

    setTimeout(function() { 
        $('#loading').remove();
        $('#previewFrame').fadeIn();
    }, 1000);

});

Answer 1

Somewhere global (ie, above your selector), put

var myTimeout;

Then in your blur()

myTimeout = setTimeout(function...

And in the focus()

clearTimeout(myTimeout);

Now whenever you focus the element, it’ll lose the fadeIn() call.