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à，您的函數已被覆蓋。 希望能幫助到你。