在html中python代碼和javascript代碼之間的執行順序是什么

Question

我正在使用瓶子框架動態列出一個用於編輯任務的鏈接，rows是一個具有多個元組的集合（id，task，status）邏輯上下面的代碼應該給出第一個鏈接

http://localhost:8217/edit/1

第二個鏈接

http://localhost:8217/edit/2

所以來回

但所有的鏈接都是

http://localhost:8217/edit/5

因此我懷疑這與代碼執行的順序有關，任何提示都會非常感激

<p>The open items are as follows:</p>
<table border="1">
%for row in rows:
    <tr>
    %for col in row:
        <td>{{col}}</td>   
    %end
    <script language="javascript">
        var number = "http://localhost:8217/edit/";
        var key = {{row[0]}};
        console.log(key);
    </script>
    <td>
        <a href="" onClick="location.href=number +key;return false";>Editing</a> 
    </td>
    </tr>
%end
</table>

Answer 1

Python代碼在服務器上運行; Javascript代碼在客戶端上運行。
因此，Javascript代碼只能在Python代碼完成后運行。

---

但是，這與您的問題無關。

HTML標記不會創建局部變量范圍; 所有行共享相同的key變量。

當您單擊鏈接時， key將始終具有最后一個值（因為所有JS已經執行）。

您應該在服務器端代碼中構建一個href屬性。

Answer 2

“問題”在你的javascript中。 這不是一個真正的問題，它只是javascript事件循環的工作方式。 簡短的回答是，當您的瀏覽器正在讀取渲染模板時，它會將onClick事件加載到事件隊列中，但實際上並不會調用它們。 只有在完成頁面處理后，它才會開始通過事件隊列並逐個讀取它們。 但此時，頁面中的所有<script>標記都已處理完畢， key的當前值將是它從循環中獲得的最后一個值，可能是您給出的示例中的5 。 當瀏覽器處理來自事件隊列的事件時，它只會將key的當前值分配給onClick句柄，這就是它們都獲得值5的原因。

一個可能的解決方法是在讀取腳本標記時使用閉包來獲取key的當前值的“快照”。 要創建閉包，我將使用自調用函數，但還有其他方法可以執行此操作：

var key = (function() {
    return {{row[0]}};
)();

這實際上是一個非常常見的問題，因此您可能需要四處尋找更全面的解釋。 一個很好的起點是這里的“臭名昭着的循環問題”小節： Javascript范圍和閉包