Javascript can'；t在单独的js文件中调用jquery自定义函数

我正在尝试将我的幻灯片放映功能

runShow（）

移动到一个名为panzoomslideshow.js的单独的.js文件中 这只是将我的脚本分离到另一个文件中，然后供我的所有页面使用。 我可以让resize触发器触发警报，但它不会调用

runShow（）

函数-我做错了什么？我以前让它跑过，但现在不行了

在我的网页头部调用panzoomslideshow.js的脚本，在每次调整大小时，panzoomslideshow.js文件函数中的

runShow（）

函数被调用：

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

//***这将在调整大小时重新加载播放器***\\
var树脂定时器；
$（窗口）。调整大小（函数（）{
clearTimeout（resizeTimer）；
resizeTimer=setTimeout（runShow（），100）；
});

我应该注意的是，我还尝试将$（function（）{}）放在它的周围，但是所有变量都无法从runShow（）函数访问，该函数将不会运行

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" );
    }

};

var-dur=2000；
var pDur=4500；
var vp_width=window.innerWidth；
var vp_height=window.innerHeight；
var宽度_大=880；
var高度_大=495；
可变宽度_中等=720；
var高度_中等=405；
var宽度_小=480；
var高度_小=270；
var宽度_micro=320；
var高度_micro=180；
可变滑动宽度；
高度；
var anim_宽度；
var anim_高度；
var保证金(顶部);；
var margin_左；
警报（“已设置全局变量，如vp_宽度和vp_高度为“+vp_宽度+”和“+vp_高度”）；
runShow（）；
函数runShow（）{
如果（vp_宽度：）
你试过这个吗

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

内联脚本放在哪里？在body或head部分？最好创建一个globle对象（名称空间）来放置顶级函数，以避免全局名称空间混乱。例如，在代码的顶部，类似var myApp={}，然后是myApp.runShow=function（）{}；尝试传递函数引用，而不是
setTimeout（runShow，100）
Aaah当然-函数还没有加载…谢谢伙计：Dbut使用document.ready与文件加载没有任何关系…这是为了加载DOM。很可能，函数是在使用后声明的，document.ready提供了必要的延迟，因此函数在使用前就被声明了它被调用了。但是，当您需要执行dom操作以确保dom已加载时，使用document.ready仍然是一个很好的建议：）啊，对了，它工作得很好：）我首先添加了.js文件，所以在我看来，当我到达resize触发器时，它应该已经准备好了，但由于某些原因，它不是-
$（document）.ready（函数（）
至少修复了这个问题。@Dhanasekar S M脚本部分在我的文档的标题中。我现在将runShow（）放在
$（文档）中。在执行重新调整大小触发器之前，准备好（函数（）
），以使幻灯片在页面加载时运行，然后在每次重新调整大小后重新加载。