Question

这是我的左右导航代码。如何在此添加无限循环：

if (i < this.sindex) { //slide to right
    _old.addClass('right');
    setTimeout(function () {
        _old.removeClass('right sel anim')
    }, 300);
    _new.removeClass('anim right').addClass('sel left');
    setTimeout(function () {
        _new.addClass('anim').removeClass('left')
    }, 5);
} else if (i > this.sindex) { //slide to left
    _old.addClass('left');
    setTimeout(function () {
        _old.removeClass('left sel anim')
    }, 300);
    _new.removeClass('anim left').addClass('sel right');
    setTimeout(function () {
        _new.addClass('anim').removeClass('right')
    }, 5);
}

它是一个没有无限循环功能的sumogallery插件。

Answer 1

不确定是否正在使用任何插件。但是，您可以轻松实现自己的无限导航。为了以非阻塞方式无限循环，您可以使用setTimeout并递归调用处理程序。

无限循环实现：

class InfiniteLooper {

    constructor(arr, handler, options){
        this.arr = arr;
        this.index = 0;
        this.options = options;
        this.handler = handler;
        this.t1 = null
        this.t2 = null

    }

    recur() {
        var that = this;
        if(this.index < this.arr.length){
            this.t1 = setTimeout(this.handler(this.arr[this.index]), 0);
            this.index ++

            if(this.options && this.options.circular && this.index == this.arr.length) {
                this.index = 0;
            }

            this.t2 = setTimeout(function() {
                that.recur()
            }, 0);
        }
    }

    run() {
        this.recur()
    }

    stop() {
        clearTimeout(this.t1)
        clearTimeout(this.t2)
    }
}

const array = [1,2,3,4,5]
const IL = new InfiniteLooper(array, console.log, {circular:true});
IL.run()

// Execute some more code
console.log('Non blocking!');
console.log('Do some math', 100*9);

const t = setInterval(()=>{
console.log('Do some more math in every 1 seconds', Math.random(1,4));
}, 1000)

// stop the loop after 10 sec
setTimeout(()=>{
    IL.stop()
    clearInterval(t)
}, 10000)

我在https://medium.com/@mukeshbiswas/looping-infinitely-in-a-non-blocking-way-2edca27bc478处详细写过。看看是否有帮助。

图像导航无限循环

1 个答案: