This is suseptible to click spam, and loads multiple times when clicked. How'd I make it so it loads only once when it's loading in progress and is clicked multiple times?

loadingimg = '<img src="images/loading.gif" alt="Loading.." style="margin:auto;display:block;padding:15px;" />';
$(document).ready(function(){
    $('#rstory').html(loadingimg).load('ajax/randomstory.php', function() {
        $('#rstory').fadeIn('fast')
    });
    $('#getrstory').click(function() {
    $('#rstory').fadeOut('fast', function() {
        $('#rstoryload').html(loadingimg)
        $('#rstory').load('ajax/randomstory.php', function() {
        $('#rstoryload').html('');
        $('#rstory').fadeIn('fast');
        });
        });
    });
    
});

If I understand you correctly:

Make a variable called "loading" that is set to false, but is made true on click, but made false again in the callback. Then, in the click event, only make the AJAX call and fadeOut() if !loading:

loadingimg = '<img src="images/loading.gif" alt="Loading.." style="margin:auto;display:block;padding:15px;" />';
$(document).ready(function(){
var loading=false;
    $('#rstory').html(loadingimg).load('ajax/randomstory.php', function() {
        $('#rstory').fadeIn('fast')
    });
    $('#getrstory').click(function() {
    if(!loading) {
    loading=true;
    $('#rstory').fadeOut('fast', function() {
        $('#rstoryload').html(loadingimg)
        $('#rstory').load('ajax/randomstory.php', function() {
        loading=false;
        $('#rstoryload').html('');
        $('#rstory').fadeIn('fast');
        });
        });
    }
    });
});

Thanks, finished working solution is:

loadingimg = '<img src="images/loading.gif" alt="Loading.." style="margin:auto;display:block;padding:15px;" />';
$(document).ready(function(){
var loading=false;
    $('#rstory').html(loadingimg).load('ajax/randomstory.php', function() {
        $('#rstory').fadeIn('fast')
    });
    $('#getrstory').click(function() {
    if(!loading) {
    loading=true;
    $('#rstory').fadeOut('fast', function() {
        $('#rstoryload').html(loadingimg)
        $('#rstory').load('ajax/randomstory.php', function() {
        $('#rstoryload').html('');
        $('#rstory').fadeIn('fast');
        loading=false;
        });
        });
    }
    });    
});

loading=false needs to go further down than your posted one

Thanks!

Right on. I'm glad you figured it out. I use this type of technique a lot when I'm doing loading sequences that use events to trigger them.