如何在其他函数运行时禁用JavaScript函数

你好，

我正在学习/练习在JS/JQuery中制作自定义滑块，我已经编写了以下代码。它几乎运行良好，但没有什么问题。我现在做的是运行两种类型

使用autoRun（）函数每5秒自动运行一次

在每次点击滑块指示器时，使用点击事件运行到相关幻灯片

在下面的代码中，我面临两个问题，如果您能帮助我，我将非常感谢您

我面临的问题是：

当我点击滑块指示器时，我想在特定的时间内禁用自动运行功能，比如5秒，这样我的滑块看起来更专业

当它转到最后一张幻灯片或返回到第一张幻灯片时，控制台会在下面显示一个错误，并且需要两倍的时间，例如：10秒才能转到下一张幻灯片

“未捕获类型错误：无法读取未定义的属性'left'”

$（函数（）{
var$mainsliderrap=$（“#滑块_主包装器”）
，$sliderMain=$mainsilderrap.find（'.main slider'））
，$sliderchildren=$sliderMain.children（'li'））
，$sliderIndicator=$mainSliderRap.find（'.slider主指示器'）；
//滑块设置
addEventListener（'resize'，initMainSlider）；
initMainSlider（）；
//滑块设置功能
函数initMainSlider（）{
var wWidth=window.outerWidth
，sliderMinWidth=wWidth*$sliderchildren.length
$sliderMain.css（'width'，sliderMainWidth+'px'）；
$sliderMain.children（'li'）.first（）.addClass（'visible'）；
$sliderIndicator.children（'li'）.first（）.addClass（'active'）；
}
//要在单击事件时运行滑块吗
$sliderIndicator.on（'click'，'li'，updateMainSlider）；
//如果单击事件未发生，则我希望在5秒后自动运行滑块
自动运行（）
函数自动运行（）{
var mainSliderChildLenght=$sliderchildren.length；
var i=0；
var-next=true；
var-dir；
setInterval（函数（）{
如果（主滑块ChildlengHT==i | | i<0）{
下一个=！下一个；
if（i<0）{
i=0；
}
}
如果（下一个）{
dir='next'；
i++；
}
否则{
dir='prev'；
我--；
if（i<0）{
返回
}
}
更新滑动器（dir）；
$（“#结果”）。正文（一）
}, 5000);
}
//下面是更新滑块的函数
函数updateMainSlider（a）{
var visibleSlide=$sliderchildren.filter（'.visible'）
，actualTranslate=getTranslateValue（$sliderMain，'X'）；
当从autoRun（）调用函数时，if（a=='next'| | a=='prev'）{//在该if中运行
控制台日志（a）
var newSlide=（a=='next'）？visibleSlide.next（）：visibleSlide.prev（）
，newSlideOffsetLeft=newSlide.offset（）.left
，valueToTranslte=-newSlideOffsetLeft+实际传输；
setTranslateValue（$sliderMain，'translateX'，valueToTranslte）；
visibleSlide.removeClass（'visible'）；
newSlide.addClass（“可见”）；
$sliderIndicator.children（'.active'）.removeClass（'active'）；
$sliderIndicator.find（'li'）.eq（newSlide.index（））.addClass（'active'）；
}
当从单击事件调用函数时，此if中的else{//正在运行
控制台日志（a）
var newSlide=$（a.target）
，$newslideindicationindex=newSlide.index（）
，$visibleSlideIndex=visibleSlide.index（）；
if（$newslideindicator！==$visibleSlideIndex&！$（$sliderIndicator）.hasClass（'disable-click'））{
$（$sliderIndicator）.addClass（'disable-click'）；
setTimeout（函数（）{
$（$sliderIndicator）.removeClass（'disable-click'）；
}, 1000);
变量差异=$newslideindicator索引-$visibleSlideIndex
，valueToTranslte=-（差*窗宽）+实际传输；
setTranslateValue（$sliderMain，'translateX'，valueToTranslte）；
$（$sliderchildren[$visibleSlideIndex]）.removeClass（'visible'）；
$（$sliderchildren[$newSlideIndicatorIndex]）.addClass（'visible'）；
$sliderIndicator.children（'.active'）.removeClass（'active'）；
$sliderIndicator.find（'li'）.eq（$newSlideIndicatorIndex.addClass（'active'）；
}//如果结束，则结束
}//结束其他
}//结束函数
//设置转换值函数
函数setTranslateValue（元素、属性、值）{
$（元素）.css({
“转换”：属性+”（“+value+'px）”
});
}
//获取转换值函数
函数getTranslateValue（元素、轴）{
var trValue=$（元素）.css（'transform'）；
如果（trValue！=“无”）{
trValue=trValue.split（'））[0]；
trValue=trValue.split（'，'）；
trValue=（轴=='X'）？trValue[4]：trValue[5]；
}
否则{
trValue=0；
}
返回编号（trValue）；
}
})

ol{
列表样式：无；
保证金：0；
填充：0；
}
身体{
保证金：0；
填充：0；
}
.滑块主包装{
盒影：嵌入0 20px橙色；
最小高度：100vh；
}
主滑块{
高度：85vh；
框阴影：嵌入0 20px绿色；
转换：转换500毫秒；
}
ol.main-slider>li{
浮动：左；
}
老妈
$sliderIndicator.on('click', 'li', updateMainSlider);
// save the function returned by autoRun
var go = autoRun();
// start autoRun
go();
// add a variable to store interval identifier
var interval;
function autoRun() {
    var mainSliderChildLenght = $sliderchildren.length;
    var i = 0;
    var next = true;
    var dir;
    // return a function to begin autoRun for real
    return function() {
        // save interval identifier
        interval = setInterval(function () {
            // your code unchanged
        }, 5000);
    };
}
function updateMainSlider(a) {
    var visibleSlide = $sliderchildren.filter('.visible')
        , actualTranslate = getTranslateValue($sliderMain, 'X');
    if (a == 'next' || a == 'prev') {
        // your code - unchanged
    } else {
        // clear interval
        clearInterval(interval);
        // your code - unchanged
        // now add this to restart the interval
        go();
    }
}

$(function () {
    var $mainSliderWrap = $('#slider_main_wrapper')
        , $sliderMain = $mainSliderWrap.find('.main-slider')
        , $sliderchildren = $sliderMain.children('li')
        , $sliderIndicator = $mainSliderWrap.find('.slider-main-indicator');
    // Slider Setup
    window.addEventListener('resize', initMainSlider);
    initMainSlider();

    // Slider SetUp function
    function initMainSlider() {
        var wWidth = window.outerWidth
            , sliderMainWidth = wWidth * $sliderchildren.length
        $sliderMain.css('width', sliderMainWidth + 'px');
        $sliderMain.children('li').first().addClass('visible');
        $sliderIndicator.children('li').first().addClass('active');
    }
    // Want to Run Slider on Click event
    $sliderIndicator.on('click', 'li', updateMainSlider);
    // If Click Event Not happenening then I want to auto run Slider after 5 seconds
    var go = autoRun();
    // start autoRun
    go();
    var interval;

    function autoRun() {
        var mainSliderChildLenght = $sliderchildren.length;
        var i = 0;
        var next = true;
        var dir;
        return function() {
            setInterval(function () {
                if (mainSliderChildLenght == i || i < 0) {
                    next = !next;
                    if (i < 0) {
                        i = 0;
                    }
                }
                if (next) {
                    dir = 'next';
                    i++;
                }
                else {
                    dir = 'prev';
                    i--;
                    if(i < 0) {
                        return
                    }
                }
                updateMainSlider(dir);
                $('#result').text(i)
            }, 5000);
        });
    }
    // Here is the function for Updating the Slider
    function updateMainSlider(a) {
        var visibleSlide = $sliderchildren.filter('.visible')
            , actualTranslate = getTranslateValue($sliderMain, 'X');
        if (a == 'next' || a == 'prev') { // inside this if is running when function is called from autoRun()
            console.log(a)
            var newSlide = (a == 'next') ? visibleSlide.next() : visibleSlide.prev()
                , newSlideOffsetLeft = newSlide.offset().left
                , valueToTranslte = -newSlideOffsetLeft + actualTranslate;

            setTranslateValue($sliderMain, 'translateX', valueToTranslte);

            visibleSlide.removeClass('visible');
            newSlide.addClass('visible');
            $sliderIndicator.children('.active').removeClass('active');
            $sliderIndicator.find('li').eq(newSlide.index()).addClass('active');
        }
        else { // inside this if is running when function is called from click event
            clearInterval(interval);
            console.log(a)
            var newSlide = $(a.target)
                , $newSlideIndicatorIndex = newSlide.index()
                , $visibleSlideIndex = visibleSlide.index();
            if ($newSlideIndicatorIndex !== $visibleSlideIndex && !$($sliderIndicator).hasClass('disable-click')) {
                $($sliderIndicator).addClass('disable-click');
                setTimeout(function () {
                    $($sliderIndicator).removeClass('disable-click');
                }, 1000);
                var diff = $newSlideIndicatorIndex - $visibleSlideIndex
                    , valueToTranslte = -(diff * window.outerWidth) + actualTranslate;

                setTranslateValue($sliderMain, 'translateX', valueToTranslte);

                $($sliderchildren[$visibleSlideIndex]).removeClass('visible');
                $($sliderchildren[$newSlideIndicatorIndex]).addClass('visible');
                $sliderIndicator.children('.active').removeClass('active');
                $sliderIndicator.find('li').eq($newSlideIndicatorIndex).addClass('active');
            } // end if
            go();
        } // end else
    } // end function
    // SetTranslate Value Fucntion
    function setTranslateValue(element, property, value) {
        $(element).css({
            'transform': property + '(' + value + 'px)'
        });
    }
    // Get Translate Value function
    function getTranslateValue(element, axis) {
        var trValue = $(element).css('transform');
        if (trValue !== 'none') {
            trValue = trValue.split(')')[0];
            trValue = trValue.split(',');
            trValue = (axis == 'X') ? trValue[4] : trValue[5];
        }
        else {
            trValue = 0;
        }
        return Number(trValue);
    }
})