Javascript 函数上的未捕获引用错误

我正在遵循一个简单的tut，它有望构建一个响应滑块，但是它一直告诉我控制台中有一个错误，指向一个名为

advance（）

以下是滑块的简单html：

<div class="slider">
<div class="slide-viewer">
    <div class="slide-group">
        <div class="slide slide-1">1</div>
        <div class="slide slide-2">2</div>
        <div class="slide slide-3">3</div>
        <div class="slide slide-4">4</div>
    </div>
</div>
</div>
<div class="slide-buttons"></div>

1.
2.
3.
4.

下面是脚本文件之前包含的JS-JQuery，因此我知道这不是问题所在，但当我单击按钮时，控制台中会显示错误：

$(document).ready(function(){
$('.slider').each(function(){
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides = $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;

    function advance(){
        clearTimeout(timeout);

        timeout = setTimeout(function(){
            if (currentIndex < ($slides.length - 1) ){
                move(currentIndex + 1);
            } else {
                move(0);
            }
        }, 4000);
    }

    $.each($slides, function(index){
        var $button = $('<button type="button" class="slide-btn">&bull;</button>');
        if(index === currentIndex) {
            $button.addClass('active');
        }
        $button.on('click', function(){
            move(index);
        }).appendTo('.slide-buttons');
        buttonArray.push($button);
    });

advance();

});

function move(newIndex) {
    var animateLeft, slideLeft;

    advance();

    if ($group.is(':animated') || currentIndex === newIndex) {
        return;
    }

    buttonArray[currentIndex].removeClass('active');
    buttonArray[newIndex].addClass('active');

    if (newIndex > currentIndex) {
        slideLeft = '100%';
        animateLeft = '-100%';
    } else {
        slideLeft = '-100%';
        animateLeft = '100%';
    }

    $slides.eq(newIndex).css( {left: slideLeft, display: 'block'} );
    $group.animate( {left: animateLeft} , function() {
        $slides.eq(currentIndex).css( {display: 'none'} );
        $slides.eq(newIndex).css( {left: 0} );
        $group.css( {left: 0} );
        currentIndex = newIndex;
    });
}
});

$（文档）.ready（函数（）{
$（'.slider'）。每个（函数（）{
var$this=$（this）；
var$group=$this.find（'.slide group'）；
var$slides=$this.find（'.slide'）；
var buttonArray=[]；
var currentIndex=0；
var超时；
功能推进（）{
clearTimeout（超时）；
timeout=setTimeout（函数（）{
如果（当前索引<（$slides.length-1））{
移动（当前索引+1）；
}否则{
移动（0）；
}
}, 4000);
}
$。每个（$幻灯片，功能（索引）{
var$button=$（“&bull；”）；
如果（索引===当前索引）{
$button.addClass（'active'）；
}
$button.on（'click'，function（）{
移动（索引）；
}).appendTo（“.滑动按钮”）；
按钮。按下（$按钮）；
});
前进（）；
});
函数移动（newIndex）{
变量animateLeft，slideLeft；
前进（）；
如果（$group.is（':animated'）| | currentIndex===newIndex）{
返回；
}
buttonArray[currentIndex].removeClass（'active'）；
buttonArray[newIndex].addClass（'active'）；
如果（新建索引>当前索引）{
slideLeft='100%'；
animateLeft='-100%'；
}否则{
slideLeft='-100%'；
animateLeft='100%'；
}
$slides.eq（newIndex）.css（{left:slideLeft，display:'block'}）；
$group.animate（{left:animateLeft}，function（））{
$slides.eq（currentIndex.css（{display:'none'}）；
$slides.eq（newIndex.css（{left:0}）；
$group.css（{left:0}）；
currentIndex=newIndex；
});
}
});

---

它告诉我问题出现在Js的第40行，这是您在脚本中第二次看到

advance（）

。任何帮助都将不胜感激，因为我已经修改了代码，因为有些代码已经失败了，但这让我很难堪！当然Js不是我最强的语言

问题在于函数

advance（）{

在foreach作用域内。它是在不在同一作用域内的

move（）

函数内调用的

最简单的方法是将移动方法移动到前进功能下方：

    function advance(){
        clearTimeout(timeout);

        timeout = setTimeout(function(){
            if (currentIndex < ($slides.length - 1) ){
                move(currentIndex + 1);
            } else {
                move(0);
            }
        }, 4000);
    }

    function move(newIndex) {
    //code for move function here

函数高级（）{
clearTimeout（超时）；
timeout=setTimeout（函数（）{
如果（当前索引<（$slides.length-1））{
移动（当前索引+1）；
}否则{
移动（0）；
}
}, 4000);
}
函数移动（newIndex）{
//这里是move函数的代码

嗯，move函数中的advance（）调用无法访问另一个循环的advance定义。范围不同。