jQuery / Javascript：函数未在document.ready中调用

Question

我想要做的是有一个滑块，DIV可以左右移动。 该代码如下所示：

<script type="text/javascript">
var $slider;
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

 $(function() {
    $slider = $('.slidemid');
    $slider.fadeOut();

    // set active classes
    $slider.first().addClass('active');
    $slider.first().fadeIn($transition_time).css('display', 'inline-block');

    // auto scroll 
    setInterval(function () {
      slideright(); }, $transition_time + $time_between_slides );

    $('.slidelefta').click(function() {slideleft(); return false;});
    $('.sliderighta').click(function() {slideright(); return false;});

 });

 function slideright() {
 $slider = $('.slidemid');
  var $i = $slider.find('.active').index();

  $slider.eq($i).removeClass('active');
  $slider.eq($i).fadeOut($transition_time);

  if ($slider.length == $i + 1) $i = -1; // loop to start

  $slider.eq($i + 1).fadeIn($transition_time).css('display', 'inline-block');
  $slider.eq($i + 1).addClass('active');
}
function slideleft() {
 $slider = $('.slidemid');
  var $i = $slider.find('.active').index();

  $slider.eq($i).removeClass('active');
  $slider.eq($i).fadeOut($transition_time);

  if ($i == 0) $i = $slider.length; // loop to end

  $slider.eq($i - 1).fadeIn($transition_time).css('display', 'inline-block');
  $slider.eq($i - 1).addClass('active');
}

</script>

初始的fadeOut ， fadeIn和addClass （在document.ready函数中）可以很好地执行。

但是，对slideright()和slideleft()的调用永远不会执行。

Answer 1

如果您在控制台上没有收到任何错误，那么我认为这是javascript范围的问题。 当您在匿名函数的内部调用函数slideright（）和sildeleft（）时，但是这些函数是在全局范围内的匿名函数外部定义的。

认为匿名函数是一个类，并且您正在类函数内部调用该函数，而这些函数不属于该类范围。

解决方案（我尚未确认代码，我很确定该代码可以工作）：

1. 在匿名函数$（function（）或

2. 将那些函数包装在构造函数或对象中

   函数slide（）{this.slideRight = function（）{} this.slideLeft = function（）{}

   } //像这样调用它var slide = new Slide（）; slide.slideRight //对于slideRight slide.slideLeft //对于slideLeft

Answer 2

看看这个JSBin ，我将您的代码粘贴到了其中，并简化了某些行，因为调用定义的函数是问题所在。 您可以在控制台中看到
实际上，该函数是从setInterval调用的。 另外，我想指出的是，最好在范围内定义函数，就像在JSBin演示中声明函数一样。 为什么？ 好吧，如果在全局范围之外定义它们，那么非常糟糕的人可以在控制台中执行slideright = function () { evilXSShere; } slideright = function () { evilXSShere; }和voilà，您的函数已被覆盖。 希望能帮助到你。