clearTimeout 在幻灯片中不起作用

Question

我有一个全宽幻灯片。所以我有一些问题。 一是clearTimeout 不起作用。如果我通过单击调用该函数，它应该清除超时。

有人知道为什么这不起作用吗？请解释并说明问题到底出在哪里。

谢谢你，对不起我的英语不好。

var index = 0;
var slideSpeed = 1000;
function mainSlider(menuLink){
    clearTimeout(slide);
    if(menuLink !== false){
        alert('You call this function by a click event.');
        clearTimeout(slide);
    }
    var sliderIndex = $('.main_slider_content').length - 1;
    $('.main_slider_content').hide();
    index++;
    if(index > sliderIndex){
        index = 0;
    }
    $('.main_slider_content:eq(' + index + ')').show();
    var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
    setTimeout(countContentImg(index), slideSpeed);
}
$(document).on('click', '.main_slider_menu_link',function(){
    var linkIndex = $(this).index();
    mainSlider(linkIndex);
});
function countContentImg(index){
    $('#main_slider_selected_img').html('');
    var sliderIndex = $('.main_slider_content').length;
    for(var i = 0; i < sliderIndex; i++) {
        if(i === index)
            $('#main_slider_selected_img').append('<li class="main_slider_menu_link main_slider_menu_link_slected"></li>');
        else
            $('#main_slider_selected_img').append('<li class="main_slider_menu_link"></li>');
    }
}
$(document).ready(function(){
    countContentImg(index);
    mainSlider(false);
});

Answer 1

这看起来像是范围问题。您正在尝试从尚不包含超时引用的变量中清除超时。每次调用 mainSlider 都会创建一个新的、本地范围的超时引用，在您尝试清除它很久之后。

function mainSlider(menuLink){
    clearTimeout(slide); // Clearing a timeout that doesn't exist yet
    if(menuLink !== false){
        alert('You call this function by a click event.');
        clearTimeout(slide); // Clearing a timeout that doesn't exist yet
    }
    var sliderIndex = $('.main_slider_content').length - 1;
    $('.main_slider_content').hide();
    index++;
    if(index > sliderIndex){
        index = 0;
    }
    $('.main_slider_content:eq(' + index + ')').show();
    // Now the timeout exists, but only in the scope of this current call
    var slide = setTimeout(function(){mainSlider(false)}, slideSpeed); 
    setTimeout(countContentImg(index), slideSpeed);
}

改成：

var slide;
function mainSlider(menuLink){
    clearTimeout(slide);
    if(menuLink !== false){
        alert('You call this function by a click event.');
        clearTimeout(slide);
    }
    var sliderIndex = $('.main_slider_content').length - 1;
    $('.main_slider_content').hide();
    index++;
    if(index > sliderIndex){
        index = 0;
    }
    $('.main_slider_content:eq(' + index + ')').show();
    // Remove var
    slide = setTimeout(function(){mainSlider(false)}, slideSpeed); 
    setTimeout(countContentImg(index), slideSpeed);
}