每隔5秒在一个元素上重复运行一次jQuery.click事件

Run a jQuery .click event on an element every 5 seconds repetitively

本文关键字：运行 一次 事件 jQuery click 元素 5秒 一个 每隔      更新时间：2023-09-26

我有一个元素，我想每5秒"点击"一次，做一些事情，然后5秒后它再次被点击，做一些事情，等等。

所以我使用了setTimeout，它完成了5秒的工作：（这里有一个例子：如何在一段时间后隐藏div？）

还有我在这里找到的jQuery事件触发器：jQuery在4秒后自动点击

我尝试使用"for"循环它，在前5秒后发生了一个.cack事件，然后在没有5秒暂停的情况下一次又一次地使用.cack事件：http://jsfiddle.net/WTJgt/417/

总的来说，我构建了我的第一个jQuery旋转器：）！

使用左右按钮-我希望它在x秒后通过"不点击"点击来移动幻灯片。

这是我的.点击"下一个"元素按钮的事件代码：

// variables     
var rotCounter = 0;
var moveInPixles = 0; 
var nunSlides = 4; // Enter the number of slides
$(".r-arrow").click(function(){
    moveInPixles = ( rotCounter + 1) * 746 * -1;
    moveInPixles += 'px'; 
    $(".rotator-container").css('margin-left', moveInPixles);
    rotCounter++;
    $(".dot").css('background-color', 'white');
    $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');  
    if (rotCounter == nunSlides) {
        rotCounter = 0; 
        $(".rotator-container").css('margin-left', 0);
        $(".dot").css('background-color', 'white');
        $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');
    } 
});

setInterval(function () {
    $(".r-arrow").click();
}, 5000);

编辑：

使用setInterval和clearInterval，以便在单击按钮时重置间隔。你的代码需要重构，因为你不能真正按原样使用它

var intervalId;
var rotCounter = 0;
var moveInPixles = 0; 
var nunSlides = 4; // Enter the number of slides
autoRotate();
function autoRotate() {
    intervalId = window.setInterval(function () {
        rotateStuff();
    }, 5000);
}
function rotateStuff() {
    moveInPixles = (rotCounter + 1) * 746 * -1;
    moveInPixles += 'px';
    $(".rotator-container").css('margin-left', moveInPixles);
    rotCounter++;
    $(".dot").css('background-color', 'white');
    $(".dot:eq(" + rotCounter + ")").css('background-color', 'yellow');
    if (rotCounter == nunSlides) {
        rotCounter = 0;
        $(".rotator-container").css('margin-left', 0);
        $(".dot").css('background-color', 'white');
        $(".dot:eq(" + rotCounter + ")").css('background-color', 'yellow');
    }
}
$('.r-arrow').on('click', function () {
    window.clearInterval(intervalId);
    rotateStuff();
    autoRotate();
});

不要点击，而是每五秒钟触发一次javascript函数。通过触发单击，您还可以激活所有其他侦听该事件的函数，其中一些函数可能与您的代码冲突或被其他库使用。

您可以使用setInterval（）来执行此操作。

你的代码应该是这样的：

// variables     
var rotCounter = 0;
var moveInPixles = 0; 
var nunSlides = 4; // Enter the number of slides
var myFunction = function(){
    moveInPixles = ( rotCounter + 1) * 746 * -1;
    moveInPixles += 'px'; 
    $(".rotator-container").css('margin-left', moveInPixles);
    rotCounter++;
    $(".dot").css('background-color', 'white');
    $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');  
    if (rotCounter == nunSlides) {
        rotCounter = 0; 
        $(".rotator-container").css('margin-left', 0);
        $(".dot").css('background-color', 'white');
        $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');
    } 
});
$(".r-arrow").click(myFunction);
setInterval(myFunction, 5000);

将setInterval分配给变量很重要，然后您就可以使用clearInterval（）停止它

var intervalID = window.setInterval(code, delay);

然后当你需要停止它时：

window.clearInterval(intervalID)

将完成

var rightArrowIntervalId = setInterval(function(){
   $(".r-arrow").trigger('click');
}, 5000);

在您的click事件中，在添加

$(".r-arrow").click(function(){
    window.clearInterval(rightArrowIntervalId);
    // will destroy existing interval
    moveInPixles = ( rotCounter + 1) * 746 * -1;
     .....
    // will create new interval in 5 seconds
    rightArrowIntervalId = setInterval(function(){
       $(".r-arrow").trigger('click');
    }, 5000);
});

我不完全理解这个问题，但如果你想每5秒调用一个函数，而不是只调用一次，那么就使用setInterval（）。

使用setInterval函数而不是setimeout

     $( function() {
    $('#login').click(function() {
        alert('login button clicked');
    });
        setInterval(function() {
            $('#login').trigger('click');
        }, 500);
});

检查更新的JSFIDDLE

相关文章：