clearTimeout 不工作 - setinterval 问题

Question

我正在编写一个滑块...

它有 btns，它会自动更换幻灯片。

但是当我们点击按钮时，setInterval 代码正在发挥作用！

示例中的问题：

它应该在接下来的 5 秒内更换幻灯片。好吗？

但是当我们在 2 秒后点击箭头时

setintrelval 应该在接下来的 5 秒内自动更换幻灯片。但它会在接下来的 3 秒内发生变化。

// other functions ...

$(document).ready(function(){

    var timeout_id = 0;
    var timeout_id = setInterval( function(){next()}, 5000)
})

    var originalAddClassMethod = jQuery.fn.addClass;
        $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('cssClassChanged');
        return result;
    }


    $('.customers_comment li').bind('cssClassChanged', function(){ 
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act) 
        clearTimeout(timeout_id);
     })

我在这里上传主题

http://demo.eagle-design.ir/amin/#sec4

Answer 1

您已将 timeout_id 声明为 dom 就绪处理程序内的局部变量，因此在 dom 就绪处理程序之外无法访问它，因此请在 [=18] 之外声明它=] 准备好处理程序，如果你想在不同的范围内使用它

var timeout_id;
$(document).ready(function () {

    timeout_id = setInterval(function () {
        next()
    }, 5000)
})

我建议将事件注册代码也移动到 dom 就绪处理程序

$(document).ready(function () {
    var timeout_id = setInterval(function () {
        next()
    }, 5000);

    $('.customers_comment li').bind('cssClassChanged', function () {
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#' + id + '"]').addClass(act).siblings('a').removeClass(act)
        clearTimeout(timeout_id);
    });
});

var originalAddClassMethod = jQuery.fn.addClass;
$.fn.addClass = function () {
    var result = originalAddClassMethod.apply(this, arguments);
    jQuery(this).trigger('cssClassChanged');
    return result;
}

Answer 2

timeout_id 未在您调用 clearTimeout. 的位置定义尝试使用：

$(document).ready(function(){

    var timeout_id = 0;
    var timeout_id = setInterval( function(){next()}, 5000)

   var originalAddClassMethod = jQuery.fn.addClass;
        $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('cssClassChanged');
        return result;
    }


    $('.customers_comment li').bind('cssClassChanged', function(){ 
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act) 
        clearTimeout(timeout_id);
     })
})

clearTimeout 不工作 - setinterval 问题

clearTimeout not working - setinterval problems

javascript

jquery

web

setinterval

cleartimeout