Question

我正在尝试使用JS将星（图像）添加到类中。

import tkinter as tk
from tkinter import ttk 
from PIL import Image, ImageTk

TITLE = ('Arial', 22, 'bold italic underline')

class LoLApp(tk.Tk):

    def __init__(self, *args, **kwargs ):

        tk.Tk.__init__(self, *args, **kwargs )
        tk.Tk.wm_title(self, 'Test')
        tk.Tk.geometry(self, '800x400')

        container = tk.Frame(self)
        container.pack(side='top', fill='both', expand = True)
        container.grid_rowconfigure(0, weight=1)
        container.grid_columnconfigure(0, weight=1)

        self.frames={}
        frame = StartPage(container, self)        
        self.frames[StartPage]=frame
        frame.grid(row=0, column=0, sticky='nsew')
        self.show_frame(StartPage)

    def show_frame(self, cont):

        frame = self.frames[cont]
        frame.tkraise()

class StartPage(tk.Frame):

     def __init__(self, parent, controller):
         tk.Frame.__init__(self, parent)
         label = tk.Label(self, text='Welcome to the First Page', font = TITLE )
         label.pack()

app = LoLApp()
app.mainloop()

因此，您可以看到我将图像添加到Java类，但我想要做的是添加图像，但每个图像之间的等待效果，而不仅仅是5个图像的块。我发现了setTimeOut函数，但如果这是最好的方法，我就不会这么做。

Answer 1

基本上可以用这样的setInterval替换你的for循环，以实现每次迭代之间的时间延迟。

let i = 0;

const interval = setInterval(() => {
  i++;
  var star = document.createElement("img");
  star.src = "star.png";
  var element = document.querySelector(".java");
  element.append(star);

  if (i === 5) { clearInterval(interval); } // <- after 5 iterations clear the interval 
}, 1000); // <- this 1000 is 1 sec. delay

虽然您可以将var element = document.querySelector(".java");移出区间之外，这样就不会多次搜索它，因为这是不必要的。

let i = 0;
var element = document.querySelector(".java");

const interval = setInterval(() => {
  i++;
  var star = document.createElement("img");
  star.src = "star.png";
  element.append(star);

  if (i === 5) { clearInterval(interval); } // <- after 5 iterations clear the interval 
}, 1000); // <- this 1000 is 1 sec. delay

Answer 2

以这种方式使用setinterval，因此在将图像附加到元素之前，您的图像很可能已经加载。

const listToAppend = [];
const element = document.querySelector(".java");

const start = () => {
  let si = setInterval(()=>{
    if(listToAppend.length === 0){
       clearInterval(si);
       return;
    }
    element.append(listToAppend.shift());
  }, 1000);
}

function putStars(){
 if(test){
    for(var i = 0; i < 5; i++){
        var star = document.createElement("img");
        star.src = "star.png";
        listToAppend.push(star);
    }
    start();
    test = false;
 }
}

在每个图像之间使用时间间隔将图像添加到类中

2 个答案: