Flask传递Python变量给JavaScript实现定时器出现NaN报错如何解决

问题核心原因 #

Flask的Jinja2模板语法（即{{变量名}}格式）仅会对render_template渲染的HTML模板文件生效，放在static目录下的静态JS文件不会被Jinja2解析，你写的'{{timing | tojson}}'在实际运行时就是普通字符串，不是你期望的数值5，字符串和数字相乘结果就是NaN。你看到的304状态码是浏览器缓存了静态JS文件，和变量没拿到没有关系。

推荐解决方法 #

方案1：在HTML模板中预定义全局变量（改造成本最低，无缓存问题）

第一步：修改display.html，在引入main.js之前新增script标签定义全局变量：

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href='/static/style.css'/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- 新增：由Jinja2渲染全局变量 -->
    <script>
        window.timerDuration = {{ timing | tojson }};
    </script>
    <script type=text/javascript src="{{ url_for('static', filename='main.js') }}"></script>
    
    <title>your dish</title>
</head>
<body>
    <h1>{{message}}! Here are some informations about your dish:</h1>
    <h2> countdown </h2>
    <div>Registration closes in <span id="time">5:00</span> minutes!</div>
</body>
</html>

第二步：修改main.js直接读取全局变量即可：

jQuery(function ($) {
  var fiveMinutes = 60 * Number(window.timerDuration),
      display = $('#time');
  startTimer(fiveMinutes, display);
});

方案2：通过HTML元素自定义属性传值（耦合度更低）

第一步：修改display.html中倒计时展示的span，增加自定义data属性：

<div>Registration closes in <span id="time" data-duration="{{timing}}">5:00</span> minutes!</div>

第二步：修改main.js读取元素的自定义属性：

jQuery(function ($) {
  var timing = Number($('#time').data('duration'));
  var fiveMinutes = 60 * timing,
      display = $('#time');
  startTimer(fiveMinutes, display);
});

内容的提问来源于stack exchange，提问作者Camille BOUQUET