AJAX调用上的Javascript不同的变量范围

Question

我编写的一个简单滑块脚本中的变量范围存在问题（由于带宽低，我不想使用现成的解决方案）。在静态加载的页面 (http) 以及通过 AJAX 加载的内容上调用滑块脚本。在静态加载的页面（所以没有 AJAX）上，脚本似乎运行良好。但是，当通过 AJAX 调用时，调用的方法找不到 DOM 的元素，这会停止滑块所需的必要动画。

所有事件都通过偶数委托处理（使用 jQuery 的 on() 函数），但这并没有提供任何解决方案。我很确定它与脚本的结构和变量范围有关，但无法确定如何更改结构。所以我正在寻找一种适用于两种情况的解决方案（称为正常或通过 AJAX）。

我尝试在每个函数中声明所需的变量，但这导致了一些错误的错误，例如我为动画设置的间隔的乘积，因为函数范围。希望有人可以在正确的方向上帮助我。

// Slider function
(function (window, undefined) {
    var console = window.console || undefined, // Prevent a JSLint complaint 
        doc = window.document,
        Slider = window.Slider = window.Slider || {},
        $doc = $(doc),
        sliderContainer = doc.getElementById('slider_container'),
        $sliderContainer = $(sliderContainer),
        $sliderContainerWidth = $sliderContainer.width(),
        slider = doc.getElementById('slider'),
        $slider = $(slider),
        $sliderChildren = $slider.children(),
        $slideCount = $sliderChildren.size(),
        $sliderWidth = $sliderContainerWidth * $slideCount;
    $sliderControl = $(doc.getElementById('slider_control')),
    $prevButton = $(doc.getElementById('prev')),
    $nextButton = $(doc.getElementById('next')),
    speed = 2000,
    interval,
    intervalSpeed = 5000,
    throttle = true,
    throttleSpeed = 2000;

    if (sliderContainer == null) return; // If slider is not found on page return           

    // Set widths according to the container and amount of children 
    Slider.setSliderWidth = function () {
        $slider.width($sliderWidth);
        $sliderChildren.width($sliderContainerWidth);
    };

    // Does the animation
    Slider.move = function (dir) {
        // Makes use of variables such as $sliderContainer, $sliderContainer width, etc.
    };

    // On ajax call
    $doc.on('ajaxComplete', document, function () {
        Slider.setSliderWidth();
    });

    // On doc ready
    $(document).ready(function () {
        Slider.setSliderWidth();
        interval = window.setInterval('Slider.move("right")', intervalSpeed);
    });

    // Handler for previous button
    $doc.on('click', '#prev', function (e) {
        e.preventDefault();
        Slider.move('left');
    });

    // Handler for next button
    $doc.on('click', '#next', function (e) {
        e.preventDefault();
        Slider.move('right');
    });

    // Handler for clearing the interval on hover and showing next and pervious button  
    $doc.on('hover', '#slider_container', function (e) {
        if (e.type === 'mouseenter') {
            window.clearInterval(interval);
            $sliderControl.children().fadeIn(400);
        }
    });

    // Handler for resuming the interval and fading out the controls
    $doc.on('hover', '#slider_control', function (e) {
        if (e.type !== 'mouseenter') {
            interval = window.setInterval('Slider.move("right")', intervalSpeed);
            $sliderControl.children().fadeOut(400);
        }
    });
})(window);

HTML 示例结构：

<div id="slider_control">
   <a id="next" href="#next"></a>
   <a id="prev" href="#prev"></a>
</div>
<div id="slider_container">
   <ul id="slider">
      <li style="background-color:#f00;">1</li>
      <li style="background-color:#282">2</li>
      <li style="background-color:#ff0">3</li>
   </ul>
</div>

Answer 1

我注意到你有

Slider.setSliderWidth = function() {
    $slider.width($sliderWidth);
    $sliderChildren.width($sliderContainerWidth);
};

在 ajax 完成时调用。

您是否通过 ajax 更新 DOM 以提供一个您可以通过 doc.getElementById('slider') 获得的新 DOM 元素？那么你的 var slider 和 jquery var $slider 很可能指向不再存在的东西（即使有一个以 slider 为 id 的 dom 元素）。为了纠正，每当调用替换该元素的 ajax 时，重新初始化 slider 和 $slider 以使用与您相同的初始化指向新的 jquery 包装元素。

slider = doc.getElementById('slider');
$slider = $(slider);

编辑：

我不确定您将如何处理变量范围问题，但请看一下这个示例。

<pre>
<script> 
(function(){
   var a  = "something";
   function x (){
      a += "else";
   }
   function y() {
      a = "donut";
   }
   function print (){
      document.write(a +"\n");
   }
   print ();
   x();
   print ();
   y();
   print ();
   x();
   print ();
})();
document.write(typeof(a) + "\n");
</script>
</pre>

它输出到pre标签

something
somethingelse
donut
donutelse
undefined

这与您已经在做的并没有什么不同。只要a 不是方法的参数并且没有在嵌套范围内使用 var 声明，那么在function(window,undefined){ ...} 方法中定义的代码中对a 的所有引用都将引用a，假设@ 987654336@ 由var 在本地定义到该方法。有意义吗？

Answer 2

首先，您当然可以使用 jQuery 方法替换所有 getElementById。即用$('#next')替换$(doc.getElementById('next'))

Answer 3

我认为当您使用on 时，它不会像您假设的那样搜索选择器的元素。所以你必须使用：

$doc.on('click', '#slider_control #prev',function(e){
    e.preventDefault();
    Slider.move('left');
});

Answer 4

等等，什么是通过 Ajax 加载的？滑块 html 代码？在这种情况下，Slider 已经“创建”了，并且您的许多变量将指向任何地方（因为在初始化变量时这些 DOM 元素并不存在）。他们也永远不会这样做。