用于创建幻灯片元素的 setInterval setTimeout 延迟和暂停答案

【问题标题】：setInterval setTimeout delay and pause for creating slide elements用于创建幻灯片元素的 setInterval setTimeout 延迟和暂停
【发布时间】：2020-01-14 02:06:11
【问题描述】：

我有 4 个元素水平分布，我想每 3 秒将它们向左移动，第一个元素和第 4 个元素是相同的，所以当我们在第 4 个元素时，我会改回第一个元素动画，因此幻灯片会自动循环播放。

发生的情况是第一张/第四张幻灯片暂停了两次。我正在寻找一种方法来解决它，我试图通过“if”在间隔期间更改“pause”var，但这似乎是不可能的。

我尝试在间隔内设置超时，但它们都并行工作

function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {

   callback();

   if (++x === repetitions) {
       window.clearInterval(intervalID);
   }
}, delay);}

比这个

    var $post = $('.testi');
var x = -100;
var pause = 1500;
setIntervalX(function () {
    $post.css('transform', 'translateX(' + x + '%)');
    if ( x == -400 ){
        $('.testi').css('transition', '0s');
        $('.testi').css('transform', 'translateX(0)');
        x = -100;   
    }
    else {
    setTimeout(function(){
        $('.testi').css('transition', '1.5s ease');
        x = x - 100;
    }, 1500);
    }
}, pause, 100);

【问题讨论】：

标签： javascript settimeout delay setinterval

【解决方案1】：

当 x 达到 -400 时，需要立即将其带回 -100，无需超时周期。

试试这个：

var $post = $('.testi');
var x = -100;
var pause = 1500;
setIntervalX(function () {

    if ( x == -400 ){
        $('.testi').css('transition', '0s');
        $('.testi').css('transform', 'translateX(0)');
        x = -100;   
    }

    $post.css('transform', 'translateX(' + x + '%)');

    setTimeout(function(){
        $('.testi').css('transition', '1.5s ease');
        x = x - 100;
    }, 1500);

}, pause, 100);

【讨论】：

谢谢你让我以不同的方式思考这个问题，所以我设法解决它只是做了一些改变 - 请参阅下面的答案

【解决方案2】：

谢谢@Jonathan Halpern，你让我以不同的方式思考这个问题，所以我设法解决它只是做了一些改变

var $post = $('.testi');
var x = -100;
var pause = 4000;
setIntervalX(function () {
    if (x == -400){
        $post.css('transition', '0s ease');
        $post.css('transform', 'translateX(0)');
        x = -100;
    };
    setTimeout(function(){
        $('.testi').css('transition', '1s ease');
        $post.css('transform', 'translateX(' + x + '%)');
        x = x - 100;
    }, 150)
}, pause, 100);

【讨论】：