Question

我有Timer功能，可以倒计时。我将它从js移动到ts代码

这是功能代码（TS）

  export module Timer {
   export function startTimer(duration, display){
    let session_timer;
    Date.now = Date.now || (() => +new Date);
    const start = Date.now();
    let diff = 0;
    let minutes:any = 0;
    let seconds:any = 0;
    const timer = function() {
        diff = duration - (((Date.now() - start) / 1000) | 0);
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;
        if (minutes < 0) { minutes = "0"; }
        if (seconds < 0) { seconds = "0"; }
        minutes = minutes < 10 ? `0${minutes}` : minutes;
        seconds = seconds < 10 ? `0${seconds}` : seconds;
        display.html(`${minutes}:${seconds}`);
        if (diff <= 0) {
          $(this).changePage('#session_timer');
          return clearInterval(session_timer);
        }
      };

      timer();
      return session_timer = setInterval(timer, 1000);
   };

}


export default Timer;

我将它导入index.ts，像这样的webpack组件

import Timer from "./scripts/timer";

导出默认计时器;

而不是打电话给step2.js pack

喜欢这个

 import Timer from "../components/timer";

$(document).ready(() => {
  Timer.startTimer();
});

但是当我尝试运行项目时出现此错误

TypeError：无法读取属性＆＃39; html＆＃39;未定义的

JS Code就是这个

 window.startTimer = function(duration, display) {
    let session_timer;
    Date.now = Date.now || (() => +new Date);
    const start = Date.now();
    let diff = 0;
    let minutes = 0;
    let seconds = 0;

    const timer = function() {
      diff = duration - (((Date.now() - start) / 1000) | 0);
      minutes = (diff / 60) | 0;
      seconds = (diff % 60) | 0;
      if (minutes < 0) { minutes = "0"; }
      if (seconds < 0) { seconds = "0"; }
      minutes = minutes < 10 ? `0${minutes}` : minutes;
      seconds = seconds < 10 ? `0${seconds}` : seconds;
      display.html(`${minutes}:${seconds}`);
      if (diff <= 0) {
        $(this).changePage('#session_timer');
        return clearInterval(session_timer);
      }
    };

    timer();
    return session_timer = setInterval(timer, 1000);
  };

我该如何解决？在JS中所有工作都很棒

Answer 1

display是undefined，因为您没有定义它......

你需要调用你的函数：

import Timer from "../components/timer";


let display = ;//whatever this is supposed to be?
//e.g. let display = $('.myClass'); 
//to pass in a html element of myClass.

$(document).ready(() => {
  Timer.startTimer(100, display);
});

我假设这应该是一个jQuery HTML元素，这就是你调用display.html(...)

的原因

Answer 2

所以这是我的问题的答案

由于数据从View中过去，所以：

func desposit0(amount:Double,account:inout (String,Double))->(String,Double)

我需要函数从后端获取数据（从View不再起作用）。

所以我在后端变量startTimer(#{@search.session_timer}, $('#time_left'))

所以在pack中调用我的函数需要像这样

gon.timer

在此之后我需要从startTimer中调用$(document).ready(() => { Timer.startTimer(gon.timer); });，如此

createTimer

最后import Helpers from "../../global/helpers"; import TimerFunctions from "./timer_functions"; declare let gon: any; export module Timer { export function startTimer (duration){ let display: JQuery; display= $('#time_left'); TimerFunctions.createTimer(duration,display,(() => $.fancybox.open($('.session_timeout'), { afterClose() { return Helpers.navigate(gon.links.like_url); } }) )) } }; export default Timer;在另一个文件中运行

createTimer

现在一切都很完美。

display.html Typescript无效

2 个答案: