仅当条件为真时使用 Eel 调用 python 中的 JavaScript 函数

Using Eel calling JavaScript function in python only when a condition is True

描述问题 我正在尝试调用 JavaScript 函数,但仅当 if 条件在 Python 中计算为真时才调用。我正在使用 Pygame 和 Eel 开发一个音乐播放器项目,我想调用 JS 函数自动更改歌曲封面图像,而无需在上一首歌曲结束时单击按钮,我发现使用 pygame.mixer.music.get_busy () 在 python 中,在我想调用 'eel.fine()' 期间,但我确定它为什么不起作用或如何完成此操作,因为我是 Eel

的新手

预期当条件变为 True 时应从 python 代码中调用函数查找,即只想在一首歌曲结束时更改封面图像 代码段 这里有一些代码可以很容易地用于重现问题或了解我需要帮助的内容。注意:为了便于理解,我删除了大部分代码,并且只添加了与代码流相关的部分,我需要帮助。

import eel
from pygame import mixer

eel.init('web')


js='function $fine(){document.getElementById("spl").live("click");}'
def my_update():
    if pausev and not fine:
        if not start and not mixer.music.get_busy():
            #ok=js2py.eval_js(js)
            # ok()
            print("booom")
            eel.fine()  # This is the part I need help with
            play()
            print('new song up')
        else:
            print('old playing still')
    else:
        print('strictly paused')


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Aishu's Magic-Music</title>
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
        eel.expose(fine);
      function fine(){
      document.getElementById("spl").live("click");

      }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
    <section class="wellcome_area clearfix" id="home">
      <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 col-md">
                    <div class="get-start-area">
                        <form class="form-inline">
                            <input type="button" id="repeat" class="submit" value="▶ Shower" onclick="generateQRCode(7)">
                            <input type="button" id="spl" class="submit" value="▶ Play" onclick="generateQRCode(2)">
                            <input type="button" class="submit" value=">> Skip" onclick="generateQRCode(3)">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="welcome-thumb ">
            <img id="qr" class="headshot headshot-1" src="img/bg-img/play.jpg" width="50%">
        </div>
    </section>

</body>
</html>

// main.js
var whatever=1;
var loop_check=1;
function generateQRCode(data) {
    if(data==2){
    change()
     if(whatever==1){
        eel.generate_qr(1)(setImage);
        whatever=0;
    }
    else
    {
        eel.generate_qr(data)(setImage)

    }
    }
    else if(data==7){
    change_loop()
    eel.generate_qr(data)(setImage)
    }
    else{
    eel.generate_qr(data)(setImage)
    }
}
function change() 
{
    var elem = document.getElementById("spl");
    if (elem.value=="|| Pause") elem.value = "▶ Play";
    else elem.value = "|| Pause";

}
function setImage(base64) {
    document.getElementById("qr").src = base64
}

更新 它部分工作并且没有按预期工作 是我在 运行 通常

期间得到的错误

而当我打开 inspect - console 时的输出

桌面:

经过大量的试验和错误我已经解决了它,因为我是 JavaScript、Eel 的新手并且将两者都与 Python 连接,我后来才意识到在我的代码中,我已尝试使用

document.getElementById("spl").live("click");

document.getElementById("spl").trigger("click");

当我使用

document.getElementById("spl").click();

之前错过了公开 JavaScript 功能, 因此,当我在公开后再次尝试使用 .click() 时,我意识到这就是我一直以来所缺少的。尽管在没有 Eel 的 JavaScript 中,正如所述 here and here 的工作原理大致相同,但由于某些原因,当与 Eel 一起使用时会产生这种奇怪的暂停现象,仅在调试器中引起,否则会产生 websocket 错误。

很高兴我终于找到了一个真正有效的方法。