Javascript display.html Typescript不工作_Javascript_Typescript

Javascript display.html Typescript不工作

javascript typescript

Javascript display.html Typescript不工作,javascript,typescript,Javascript,Typescript,我有定时器功能，可以倒计时。我将它从js代码移动到ts代码这是功能代码（TS）导出默认定时器然后调用step2.jspack 像这样 import Timer from "../components/timer"; $(document).ready(() => { Timer.startTimer(); }); 但当我试图运行这个项目时，我出现了这个错误 TypeError:无法读取未定义的属性“html” JS代码是这样的吗 window.startTimer = f

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

这是功能代码（TS）

导出默认定时器

然后调用

step2.js

pack

像这样

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

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

但当我试图运行这个项目时，我出现了这个错误

TypeError:无法读取未定义的属性“html”

JS代码是这样的吗

 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);
  };

window.startTimer=功能（持续时间、显示）{
让会话计时；
Date.now=Date.now | |（（）=>+新日期）；
const start=Date.now（）；
设diff=0；
分钟=0；
设秒=0；
常量计时器=函数（）{
diff=持续时间-（（Date.now（）-start）/1000）| 0）；
分钟=（差异/60）| 0；
秒=（差异%60）| 0；
如果（分钟<0）{minutes=“0”；}
如果（秒<0）{seconds=“0”；}
分钟=分钟<10？`0${minutes}`：分钟；
秒=秒<10？`0${seconds}`：秒；
html（`${minutes}:${seconds}`）；
如果（diff显示
未定义

，因为您没有定义它

您需要这样调用您的函数：

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（…）

display

是

未定义的，因为您没有定义它
您需要这样调用您的函数：
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（…）
所以这里是我问题的答案
由于数据是从如下视图获取的：
startTimer(#{@search.session_timer}, $('#time_left'))

我需要一个从后端获取数据的函数（从视图不再工作）
因此，我在后端变量gon.timer

所以在pack中调用我的函数需要如下
import Timer from "./scripts/timer";

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

 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;

在此之后，我需要像这样从startTimer调用createTimer

import Timer from "./scripts/timer";

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

 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
函数
    export namespace TimerFunctions {
  let session_timer;
  export function createTimer(duration, display, func) {
    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);
      let minutes: any = (diff / 60) | 0;
      let seconds: any = (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) {
        clearInterval(session_timer);
        return func();
      }
    };
    timer();
    return (session_timer = setInterval(timer, 1000));
  }
};

export default TimerFunctions;

导出命名空间timer函数{
让会话计时；
导出函数createTimer（持续时间、显示、函数）{
Date.now=Date.now | |（（）=>+新日期（））；
const start=Date.now（）；
设diff=0；
分钟=0；
设秒=0；
常量计时器=函数（）{
diff=持续时间-（（Date.now（）-start）/1000）| 0）；
让分钟数：any=（diff/60）| 0；
让秒数：任意=（差异%60）| 0；
如果（分钟<0）{
分钟数=“0”；
}
如果（秒<0）{
秒数=“0”；
}
分钟=分钟<10？`0${minutes}`：分钟；
秒=秒<10？`0${seconds}`：秒；
html（`${minutes}:${seconds}`）；
如果（diff那么这里是我问题的答案
由于数据是从如下视图获取的：
startTimer(#{@search.session_timer}, $('#time_left'))

我需要一个从后端获取数据的函数（从视图不再工作）
因此，我在后端变量gon.timer

所以在pack中调用我的函数需要如下
import Timer from "./scripts/timer";

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

 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;

在此之后，我需要像这样从startTimer调用createTimer

import Timer from "./scripts/timer";

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

 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
函数
    export namespace TimerFunctions {
  let session_timer;
  export function createTimer(duration, display, func) {
    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);
      let minutes: any = (diff / 60) | 0;
      let seconds: any = (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) {
        clearInterval(session_timer);
        return func();
      }
    };
    timer();
    return (session_timer = setInterval(timer, 1000));
  }
};

export default TimerFunctions;

导出命名空间timer函数{
让会话计时；
导出函数createTimer（持续时间、显示、函数）{
Date.now=Date.now | |（（）=>+新日期（））；
const start=Date.now（）；
设diff=0；
分钟=0；
设秒=0；
常量计时器=函数（）{
diff=持续时间-（（Date.now（）-start）/1000）| 0）；
让分钟数：any=（diff/60）| 0；
让秒数：任意=（差异%60）| 0；
如果（分钟<0）{
分钟数=“0”；
}
如果（秒<0）{
秒数=“0”；
}
分钟=分钟<10？`0${minutes}`：分钟；
秒=秒<10？`0${seconds}`：秒；
html（`${minutes}:${seconds}`）；
if（diff）您使用的是显示
变量。它是在哪里定义的？显然不是，因此是错误的。它在参数中。我更新了post@OscarPazWell，显然，if是未定义的
。请使用控制台.log（显示）检查它<代码> >在调用“代码>显示”。HTML<代码> >类型代码编译器理解“代码>显示/代码>是什么类型？您可能必须明确注释它：<代码>显示：jQuery 。是未定义的。OsCasPaZuy使用的是<代码>显示/代码>变量。它是在哪里定义的？显然不是，因此是错误的。它是按标准排列的。显然，我更新了post@OscarPazWell，如果未定义
。请使用console.log（display）检查它
就在调用display.html
之前，Typescript编译器理解display
是什么类型？您可能需要显式地注释它：display:JQuery
。是的，它是未定义的@OscarPazAnd，还因为OP在注释中声明调用看起来像这样：startTimer（#{@search.session u timer}），$（“#time_left”）
是的，谢谢你的帮助。我会发布完整的答案，这描述了我的问题的解决，也因为OP在评论中说这个电话看起来是这样的：startTimer（#{@search.session_timer}，$（“#time_left”）
是的，谢谢你的帮助。我会发布完整的答案，这描述了我问题的解决