jquery - 间隔触发点击

标签 jquery settimeout setinterval

我有 JS 作为

setTimeout(function() {
setInterval(function() {
    $('.home-tab-news').trigger('click');
}, 15000);
}, 5000);

setTimeout(function() {
setInterval(function() {
    $('.home-tab-project').trigger('click');
}, 15000);
}, 10000);

setTimeout(function() {
setInterval(function() {
    $('.home-tab-piechart').trigger('click');
}, 15000);
}, 15000);

我想要它做的是循环中每 10 秒触发一次(它现在执行此操作,但第一个的计时已关闭?)

如果有人点击选项卡,我该如何停止转换 - 目前,如果有人自己点击选项卡,转换就会继续发生。

最佳答案

看到第一个中的15000了吗?这意味着 15,000 毫秒。 10 秒内您需要输入 10,000。

setTimeout(function() {
    setInterval(function() {
        $('.home-tab-news').trigger('click');
    }, 10000);
}, 10000);

至于停止它,您只需将间隔分配给变量即可:

var interval1;

setTimeout(function() {
    interval1 = setInterval(function() {
        $('.home-tab-news').trigger('click');
    }, 10000);
}, 10000);

点击标签后:

clearInterval(interval1);

更新:

为了清除用户单击选项卡时的间隔,您可以在所有选项卡上附加一个单击处理程序,并在处理程序触发时清除间隔。由于您也是以编程方式触发点击,因此您需要区分编程点击和手动点击,我会用一个标志来区分它;

关于时间,我建议使用一个变量来指示当前选项卡,并在移动变量的同时循环浏览它们。

var is_manual = true;
var interval1;
var Current_Tab = 1;
var Cycle_Speed_Seconds = 1;
$(function () {
    $("#tabs").tabs();
    setTimeout(function () {
        console.log("start");
        //set a click handler to your tabs:
        $('.home-tab-news, .home-tab-project, .home-tab-piechart').click(function () {
            console.log("click");
            //check if clicked manually or automatically:
            if (is_manual == false) {
                //if automatic, clear flag and continue
                is_manual = true;
            } else if (is_manual == true) {
                //if manual, clear interval
                clearInterval(interval1);
            }

            //execute default action:
            return true;
        });
        //set the interval to swap between tabs
        interval1 = setInterval(function () {
            //indicate that the click was trigerred automatically:
            is_manual = false;
            if (Current_Tab == 1) {
                Current_Tab = 2;
                $('.home-tab-news').trigger('click');
            } else if (Current_Tab == 2) {
                Current_Tab = 3;
                $('.home-tab-project').trigger('click');
            } else if (Current_Tab == 3) {
                Current_Tab = 1;
                $('.home-tab-piechart').trigger('click');
            }

        },Cycle_Speed_Seconds* 1000);
    }, 0);
});

有点长,但我相信你明白我的意思。如果您有任何疑问,请随时询问

Example

关于jquery - 间隔触发点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26173488/

相关文章:

jquery - Google Chrome 中使用 jQuery 的动画工件(红/蓝移)

javascript - 是否有垂直响应画廊插件? Jquery 还是 Javascript?

javascript - 无法使用 bootstrap 和 jquery 获取模态显示

使用flipCounter setInterval/onAnimationStopped 的 jQuery Ajax 计时循环问题

jquery - 使用jquery每10秒切换一次div?

javascript - 我如何使用 javascript 在页面上查找和替换匹配的 url

javascript - 多个 Vue.set() 不更新对象/DOM

javascript - 每 500 毫秒 http 请求一次,直到请求完成 Angular

javascript - css 未运行的 setTimeout

使用 compose 函数和 Array.reduce 进行 JavaScript 函数式编程