如何在 Javascript/jquery 中跳过 setTimeout

Question

我有一个脚本应该每 8 秒调用另一个 javascript 函数。但是，在某些情况下，我需要跳过处理 8 秒延迟的 seTimeout 函数（它是一个滑块，根据用户单击的内容，我需要立即转到特定的幻灯片）。这在 javascript 中可能吗？

因此，例如，根据用户点击的内容，我可能希望立即执行 switchBullets(4); switchNews("Title 4", "image4.jpg", "image4Logo.jpg", "")，而不管此时动画在何处。

脚本如下所示：

function animateNews() {
    $(window).load(function() {
    
    switchBullets(1);
    switchNews("Title 1", "image1.jpg", "image1Logo.jpg", "");
    setTimeout(function() { switchBullets(2); switchNews("Title 2", "image2.jpg", "image2Logo.jpg", "") 
    setTimeout(function() { switchBullets(3); switchNews("Title 3", "image3.jpg", "image3Logo.jpg", "") 
    setTimeout(function() { switchBullets(4); switchNews("Title 4", "image4.jpg", "image4Logo.jpg", "") 
    setTimeout(function() { animateNews(); 
                          }, 8000);
                          }, 8000);
                          }, 8000);
                          }, 8000);
    }
)};

Answer 1

将数据与逻辑分开。使用 setInterval() 来让它永远运行。当用户点击时，调用click()，setInterval会被取消

var timerId;
var data = [
    {title: 'Title 2', img1: 'image2', img2: 'image2Logo.jpg', other: ''},
    {title: 'Title 3', img1: 'image3', img2: 'image3Logo.jpg', other: ''},
    {title: 'Title 4', img1: 'image4', img2: 'image4Logo.jpg', other: ''}
];
$(window).load(function() {
    switchBullets(2);
    switchNews("Title 2", "image2.jpg", "image2Logo.jpg", "");
    timerId = beginSlider();
});

function beginSlider() {
    var i = 1;
    return setInterval(function () {
        switchBullets(i+2);
        switchNews(data[i].title, data[i].img1, data[i].img2, data[i].other);
        if (i === 2) { i = 0; }
        else { i += 1; }
    }, 8000);
}
function click(j) {
    clearInterval(timerId);
    switchBullets(j+2);
    switchNews(data[j].title, data[j].img1, data[j].img2, data[j].other);
    // could start slider again after 8 sec.
    // timerId = beginSlider();
}

如何在 Javascript/jquery 中跳过 setTimeout

How to skip setTimeout in Javascript/jquery

javascript

jquery

javascript-events