使MetroJs初始化更加高效和清洁

I'm using MetroJs and I've used an individual function to initialize each tile because I only ever want to see the back of one tile at a time. So with this code, each tile fully animates, showing the back and front, and then pauses for a while so that the other tiles do the same.

我正在使用MetroJs并且我使用了一个单独的函数来初始化每个图块,因为我只想一次看到一个图块的背面。因此,使用此代码,每个磁贴完全动画显示后部和前部,然后暂停一段时间,以便其他磁贴执行相同操作。

Anyway, that isn't important, as you can see my code is pretty inefficient now with a lot of repeat code. How do you think I could improve this to make it a lot shorter? I've thought about using a loop to initialise them all but I'm not sure how to go about it.

无论如何,这并不重要,因为你可以看到我的代码现在使用大量重复代码效率很低。您如何认为我可以改进它以缩短它?我已经考虑使用循环来初始化它们,但我不知道如何去做。

The reason I have used individual initialisers is that I need to create a count which applies to each tile, but I cant create the count variable from within .liveTile()

我使用单个初始化程序的原因是我需要创建一个适用于每个tile的计数,但是我无法从.liveTile()中创建count变量

JS:

var count1 = 0;
var count2 = 0;

$('.live-tile.one').liveTile({
    animationComplete:function() {
        count1++;
        if (count1 == 2) {
            $('.live-tile.one').liveTile("restart", 10000);
            count1 = 0;
        }
    }
});

$('.live-tile.two').liveTile({
    animationComplete:function() {
        count2++;
        if (count2 == 2) {
            $('.live-tile.two').liveTile("restart", 10000);
            count2 = 0;
        }
    }
});

One way to make the count variables a bit cleaner could be to move each initialisation into a function, which creates the count variable inside that function, but again then I would need to make the rest a bit more efficient.

使计数变量更清晰的一种方法是将每个初始化移动到一个函数中,该函数在该函数内创建计数变量,但是我需要再次使其余部分更有效。

1 个解决方案

#1

Can you add data-count='0' to .live-tile items?

你能将data-count ='0'添加到.live-tiles项吗?

$('.live-tile').liveTile({
    animationComplete:function() {
        var count = parseInt($(this).data('count'));
        count++;
        $(this).data('count', count);
        if (count == 2) {
            $(this).liveTile("restart", 10000);
            $(this).data('count', '0');
        }
    }
});

If not, you can also do this:

如果没有,您也可以这样做:

var counts =[0, 0, 0, 0, 0;]

$('.live-tile').liveTile({//.find will let you access all divs (.one, .two, etc.) at once that .live-tile contains
    animationComplete:function() {
        var index = $(this).index();//the index of div item (among the div items of .live-tile, it will be 0 for .one, 1 for .two, 2 for .three, etc.
        var count = counts[index];//bring the current value based on the index
        count++;//increase it 
        counts[index] = count;//restore it to the correct index
        if (count == 2) {
            $(this).liveTile("restart", 10000);
            counts[index] = 0);//reset
        }
    }
});

#1