无法在单独的js文件中调用jquery自定义函数

Question

I'm trying to move my slideshow function runShow() into a seperate .js file named panzoomslideshow.js This is simply to separate my script into another file that is then used by all my pages. I can get the resize trigger to fire an alert, but it won't call the runShow () function - what am I doing wrong? I got it to run before, but now I can't!

The script to call panzoomslideshow.js in the head of my web page and this is where on each resize, the runShow() function in the panzoomslideshow.js file function is called:

<script type="text/javascript">         //*** This will reload the player upon resizing! ***\\
var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(runShow(), 100);
});
</script>

I should note I also tried putting the $(function(){ }) around it, but then all the variables can't be accessed from the runShow() function which won't run...

panzoomslideshow.js ->

    var dur = 2000;
    var pDur = 4500;    
    var vp_width = window.innerWidth;
    var vp_height = window.innerHeight;
    var width_large = 880; 
    var height_large = 495; 
    var width_medium = 720; 
    var height_medium = 405;    
    var width_small = 480;  
    var height_small = 270; 
    var width_micro = 320;  
    var height_micro = 180;     

    var slide_width;
    var slide_height;
    var anim_width;
    var anim_height;    
    var margin_top;
    var margin_left;    
    alert("The Global variables are set, like vp_width and vp_height are "+vp_width+" and "+vp_height);

    runShow();  

function runShow() {

    if(vp_width <= 320){                        //SET Micro size
        slide_width = width_micro;
        slide_height = height_micro;
        anim_width = (width_micro * 1.2);
        anim_height = (height_micro * 1.2); 
        margin_top = -30;
        margin_left = -60;      
    } else if(vp_width <= 480){                 //SET small size
        slide_width = width_small;
        slide_height = height_small;
        anim_width = (width_small * 1.2);
        anim_height = (height_small * 1.2); 
        margin_top = -70;
        margin_left = -150;         
    } else if(vp_width <= 1140){                //SET Medium size
        slide_width = width_medium;
        slide_height = height_medium;
        anim_width = (width_medium * 1.2);
        anim_height = (height_medium * 1.2);    
        margin_top = -80;
        margin_left = -180;             
    } else if(vp_width <= 1400){                //SET Large size
        slide_width = width_large;
        slide_height = height_large;
        anim_width = (width_large * 1.2);
        anim_height = (height_large * 1.2);             
        margin_top = -100;
        margin_left = -200;
    } else {
        //do nothing since the screen size is too small???
    }       

    alert("runShow() is invoked! Slideshow Width and Height will be "+slide_width+" and "+slide_height+" The Global variables are set, like vp_width and vp_height are "+vp_width+" and "+vp_height);

    $(".carousel").carouFredSel({
        items: {
            visible: 1,
            width: slide_width,
            height: slide_height
        },
        scroll: {
            fx: "fade",
            easing: "linear",
            duration: dur,
            timeoutDuration: pDur,
            onBefore: function( data ) {
                animate( data.items.visible, pDur + ( dur * 3 ) );
            },
            onAfter: function( data ) {
                data.items.old.find( "img" ).stop().css({
                    width: slide_width,
                    height: slide_height,
                    marginTop: 0,
                    marginLeft: 0
                });
            }
        },
        onCreate: function( data ) {
            animate( data.items, pDur + ( dur *2 ) );
        }
    });

    function animate( item, dur ) {
        var obj = {
            width: anim_width,
            height: anim_height
        };
        switch( Math.ceil( Math.random() * 2 ) ) {
            case 1:
                obj.marginTop = 0;
                break;
            case 2:
                obj.marginTop = -80
                break;
        }
        switch( Math.ceil( Math.random() * 2 ) ) {
            case 1:
                obj.marginLeft = 0;
                break;
            case 2:
                obj.marginLeft = -170
                break;
        }
        item.find( "img" ).animate(obj, dur, "linear" );
    }

};

Answer 1

:) Did you try this?

$(document).ready(function () {
    //your javascript code
});