Question

我在编码滑块...

它有btns并自动更改幻灯片。

但是当我们点击按钮时，setInterval代码正在完成它的工作！

示例中的问题：

它会在接下来的5s内改变幻灯片。好吗？

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

setintrelval会在接下来的5s自动更改幻灯片。但它会在接下来的3s发生变化。

// 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

您已在dom ready处理程序中声明timeout_id作为局部变量，因此在dom ready处理程序之外无法访问它，因此如果要在不同范围内使用它，请在dom ready处理程序之外声明它

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

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

我建议将事件注册码也移到dom ready handlre

$(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问题

2 个答案: