首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我正在尝试在Typescript中创建一个简单的计时器,在浏览器控制台中它显示"this.pad不是一个函数“,我不明白为什么

在Typescript中创建一个简单的计时器时,遇到了控制台报错"this.pad不是一个函数",可能是因为未正确定义或使用了pad函数。

pad函数通常是用来给数字或字符串添加前导零或填充字符的函数。如果报错是指this.pad不是一个函数,那么可以确定pad是一个方法,而且应该是在某个对象的上下文中调用。可能的原因是该对象并没有定义pad函数,或者该函数定义的位置不正确,导致无法被访问到。

解决这个问题的方法有以下几种:

  1. 确保pad函数的定义正确并且位于正确的位置,可以尝试将其定义在计时器所在的类或对象中。例如:
代码语言:txt
复制
class Timer {
  pad(num: number): string {
    return num < 10 ? '0' + num : num.toString();
  }

  // 其他计时器相关代码...
}

const timer = new Timer();
  1. 确保pad函数所在的对象正确地绑定到计时器对象上。可以使用bind()方法或箭头函数来确保函数内的this指向正确。例如:
代码语言:txt
复制
class Timer {
  pad = (num: number): string => {
    return num < 10 ? '0' + num : num.toString();
  }

  // 其他计时器相关代码...
}

const timer = new Timer();

或者:

代码语言:txt
复制
class Timer {
  pad(num: number): string {
    return num < 10 ? '0' + num : num.toString();
  }

  // 其他计时器相关代码...
}

const timer = new Timer();
timer.pad = timer.pad.bind(timer);
  1. 确保在调用pad函数时,使用了正确的对象。例如:
代码语言:txt
复制
class Timer {
  pad(num: number): string {
    return num < 10 ? '0' + num : num.toString();
  }

  start(): void {
    setInterval(() => {
      const currentTime = new Date();
      const hours = this.pad(currentTime.getHours());
      const minutes = this.pad(currentTime.getMinutes());
      const seconds = this.pad(currentTime.getSeconds());
      console.log(hours + ':' + minutes + ':' + seconds);
    }, 1000);
  }
}

const timer = new Timer();
timer.start();

以上是根据提供的问题所能给出的较为全面和完善的答案,如有其他细节或背景信息,请提供更多相关信息以便更准确地解决问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于JavaScript计时器知识学习

定时器由浏览器实现,不同浏览器实现也会有所不同,Node.js 也实现了自己定时器。 浏览器,主计时器函数是 Window 接口一部分,具有一些其他函数和对象。...该接口使其所有元素主 JavaScript 全局可用。这就是您可以直接在浏览器控制台中执行 setTimeout 原因。...定时器延迟不是固定 在前面的例子,您是否注意到 0 ms 之后执行 setTimeout 操作并不意味着立即执行 setTimeout内部),而是脚本所有其他操作之后立即执行(包括...如果在 Node REPL 定义上面的函数,则调用者将是 global对象。如果在浏览器控制台中定义函数,则调用者将是 window 对象。...使用 setTimeout 一个执行函数创建一个计时器,依此类推。

1.6K40

React教程:组件,Hooks和性能

先看一下 useState,让我们用它来创建一个简单计数器。它是如何工作?...组件被卸载后会我们会及时知道(查看 useEffect 返回值)。是不是简单? 注意: use hook 很重要。...PropTypes 检查 React 组件接收属性(props)是否与我们内容一致。如果一致(例如:应该是对象而不是数组),将会在控制台中收到警告。...就像 TypeScript 一样,CRA(创建React App)从一开始就支持 Flow。 发现 TypeScript 更快(几乎是即时),特别是自动完成,Flow 似乎有点慢。...显然,对于前端开发人员来说,最简单方法是使用 Flow 和 TypeScript,而不是切换到 Kotlin 或F#。但是,对于正在转型到前端后端开发人员来说,这可能更容易入手。

2.6K30
  • TS实现控制台实时快照日志EventBus npm库

    官方文档也好,技术文献也罢,看了一大堆,到最终自己实操时候还是捉襟见肘 所以我决定痛改前非,准备尝试自己用 typescript一个库。...正好,之前接触业务代码,经常能看到一个之前司大牛用javascript写事件触发器,所以准备着手推翻重新用typescript实现一遍。...你应该考虑怎么样去更好,更方便,更直观实现,而不是实现一半了,发现自己输了起跑线上,推翻从头再来简直头皮发麻 支持实时监测能力。...但是有了实时观测能力后,你就可以很方便控制台中,实时观测到事件触发,包括它们入参、出参、类型。...所以我将复杂(这里复杂是指map类型数据,控制台打印后看上去不太清晰)map结构事件执行快照,转换成数组模型,控制台中以表格形式呈现给大家,更加容易阅读和调试。

    11310

    把 WebAssembly 用于提升速度和代码重用

    本例为 Chrome)请求修改后 HTML 文档后,可以用浏览器 Web 控制台确认 hstone 函数已导出为 _ hstone。...:获取并加载 WebAssembly 模块 hstone.wasm 然后实例化此模块,以便可以浏览器控制台中调用导出 hstone 函数进行确认。...该模块包含变量、函数和各种支持组件;但是与非静态类一样,模块必须实例化为可用,本例 Web 控制台中,但更常见相应 JS 粘合代码。...脚本第 6 行以相同名称导出原始 TypeScript 函数 hstone。此 WebAssembly 功能现在可用于任何 JS 粘合代码,因为浏览器控制台中一个会话将确认。...不是。 WebAssembly 解决了计算一个传统目标:有意义代码重用。

    97940

    JS调试工具,万能Console,你知道还能这样玩吗?

    前言 Console我们开发应该使用很频繁并且都会用一个工具,确实好用。但是你真的会用吗?...现在firebug推出了firebuglite工具,可以让所有浏览器都支持Console功能,而且使用上和FireBug 几乎一样。 为什么不直接使用 alert 或自己写 log?...,Chrome 和 FireBug 支持 console.clear 该方法会清空 console 控制台中所有信息 console.dirxml 显示网页某个节点(node)所包含html/xml...groupCollapsed 方法与 group 方法一样,只是显示分组默认是折叠 console.time、console.timeEnd 我们经常需要测试 js 函数执行时间,可能我们自己写代码第...这组函数其实就实现了这样功能,time(name)根据 name 创建1个新 计时器。timeEnd(name)停止给定name 计时器,并显示时间。

    1.7K20

    ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载意义何在?Webpack 开发中间件模块热拔插(HMR)

    多个月以来,和多个Github上社区贡献者一起建立支持库、包,我们最终目的是希望完成这样一个作为起点模板,也就是基于把Typescript代码和Angular2宿主ASP.NET Core项目中...服务端预渲染 浏览一遍这个站点之后,你会发现一些简单angluar2 component例子,这看起来倒不是什么牛逼了事,但是歧视已经在你看不见地方发生了一些牛逼拉瞎事情。...意义并不在于让支持哪些不运行javascript浏览器只是一种极端情况而已(如果为了这种极端情况,那还为什么要建立一个SPA应用呢?)...它真正意义在于: 极大提高了用户体验:及时他们是一个较慢网络环境或者设备上,也可以很快看到你想显示给他们内容,在这背后,你可能又一个很大捆绑javascript正在下载、转换并且执行,...你可以通过打开控制才来观测工作,当VS开始调试,浏览器控制台将会显示以下内容: ? 看到[HMR] Connected字眼了吗?代表已经准备好接收新文件了,尝试更改一个源文件。

    3.3K60

    全网最全,最详细,最友好 Typescript 新手教程

    只有一个编译步骤之后,才剩下纯JavaScript代码,可以浏览器运行。稍后你会看到TypeScript是如何编译。...现在我们要记住,TypeScript是一种特殊JavaScript,但在浏览器运行之前,需要一个“转换器”。 TypeScript新手教程:为什么TypeScript?...想知道是否有一种方法可以IDE检查这个函数,而不需要运行代码或使用Jest测试。这可能吗?...看看我们代码,我们可以想到一个简单“模型”,命名为Link,对象形状应该符合以下模式: 必须有一个类型为stringurl属性 TypeScript,你可以用一个接口来定义这个“模型”,就像这样...总之,跳过了TypeScript一个有用特性:函数返回类型。 要理解为返回值添加类型注释为什么很方便,请想象一下正在摆弄您奇特函数

    6.1K40

    JavaScript引擎是如何工作?从调用栈到Promise你需要知道一切

    Chrome 打开浏览器控制台,然后查看“Sources”标签。...num * num; 5} 6pow(num); 请注意,函数 pow 添加了一个名为 fixed 变量。...这时,你应该了解到当浏览器加载某些 JavaScript 代码时,引擎会逐行读取并执行以下步骤: 使用变量和函数声明填充全局内存(堆) 将每个函数调用送到调用栈 创建一个全局执行上下文,其执行全局函数...接下来部分,你将看到异步代码如何在 JavaScript 工作以及为什么这样工作。...让我们创建一个 Promise,它将在5秒后 resolve(你可以浏览器控制台中尝试这些例子): 1const myPromise = new Promise(function(resolve

    1.5K30

    JavaScript 视觉化:Event-Loop

    一个视觉学习者,所以我想通过低分辨率 GIF 图片以视觉方式解释来尝试帮助你,因为现在都2019年,GIF 图片不知为何还是像素化和模糊。...这些特性可以帮助我们创建一些异步、非阻塞行为 。 当我们调用一个方法时,它会被加入到一个叫做调用栈里面。调用栈是 JavaScript 引擎一部分,这与浏览器无关。...同时,setTimeout 和 respond 函数从栈中弹出,它们都返回了各自值。 gif2.1 Web 接口中,计时器将要运行时间与我们传递给它第二个参数一样长,即 1000ms。...回调并不是直接添加到调用栈而是被加到一个叫做队列东西。 gif3.1 这可能是令人迷惑部分:1000ms 后它不是被添加到调用栈,而是被添加到队列。...gif4 回调函数被添加到调用栈,执行以及返回值,最后从栈抛出。 gif5 读文章是很有趣,但你只有通过反复实际操作才能完全适应。试着想一下,如果我们运行下面的程序,控制台中会打印什么记录。

    47330

    12种 console 相关方法,帮你快速提高调试效率!(建议收藏)

    console.clear() 清除控制台之前所有信息。 3.过滤日志消息 浏览器以适当颜色显示日志信息,但也可以进行过滤,以显示特定类型。...,并且可以控制台窗格折叠或展开: 8..../ 4522.303ms 这两个方法中都可以传人一个参数,作为计时器名称,作用是代码并行运行时分清楚各个计时器。...基于chrome浏览器也允许你通过控制台中输入debug(functionName)来设置断点,例如: debug( doSomething ); 该函数必须在全局命名空间中可用,并且浏览器将在调用它时立即启动调试器...monitor(function),接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数名称a及执行时所传入参数。

    99921

    用Hardhat和Ethers引入并测试知名NFT智能合约

    要为 Solidity 文件添加语法突出显示和类型提示,Juan Blanco 称为“solidity”[13]制作了一个很棒 VSCode 扩展 - 建议安装 使开发 Solidity 更容易:...本质上,我们正在创建一个合约工厂,其中包含部署合约所需额外信息。 一旦有了合约工厂,就可以使用 .deploy() 方法,传入合约构造函数所需变量。...这种方法更彻底版本实际上会首先创建测试,然后逐渐编写代码以使其通过,但由于它不是本教程重点,我们将忽略。... bored-ape.sol 文件,请注意有一个名为 mintApe 函数接收多个 token(代表 Bored Ape NFT),并且还期望接收一些 ETH。...让我们为该函数编写一个测试,这将让我们尝试支付,并迫使我们使用合约其他一些方法来使测试通过。

    1.1K30

    事件循环秘密,竟然影响着浏览器一切!

    哎呀,要处理这么多任务,这时候主线程遇到了一个前所未有的难题:如何调度任务呢? 比如: 正在执行一个JS函数,执行到一半时候用户点击了按钮,该立即去执行点击事件处理函数吗?...正在执行一个JS 函数,执行到一半时候某个计时器到达了时间,该立即去执行回调吗? 浏览器进程通知"用户点击了按钮",与此同时,某个计时器也到达了时间,应该处理哪一个呢? .. ....浏览器必须准备好一个微队列,微队列任务优先所有其他任务执行。 目前chrome 实现,至少包含了下面的队列 : 延时队列:用于存放计时器到达后回调任务,优先级「」。... Chrome源码开启一个不会结束for 循环,每次循环从消息队列取出第一个任务执行―而其他线程只需要在合适时候将任务加入到队列末尾即可。...但浏览器必须有一个微队列,微队列任务一定具有最高优先级,必须优先调度执行。 面试题: JS计时器能做到精确计时吗? 为什么?

    13710

    JavaScrip最容易犯十大错误及其避免方法()

    当您异步获取数据时,组件将在加载数据之前至少呈现一次 - 无论是构造函数,componentWillMount还是componentDidMount获取。...最简单方法:构造函数中使用合理默认值初始化状态。...您可以IE Developer Console对此进行测试。 这相当于Chrome错误“TypeError:’undefined’不是函数”。...Uncaught RangeError 这是几种情况下Chrome中发生错误。 一种是当你调用一个不终止递归函数时。 您可以Chrome开发者控制台中对此进行测试。 8....ReferenceError: event is not defined 当您尝试访问未定义或超出当前范围变量时,将引发此错误。 您可以Chrome浏览器轻松测试

    16610

    VS Code 调试完全攻略(5):基于浏览器 React 应用

    代码设置 为了加快速度,准备了一个简单 React 应用,你要做就是检出代码并启动 CRA 开发服务器: git clone git@github.com:thekarel/debug-anything.git...代码已经包含了这个配置文件。尽管非常简单,但还是逐行介绍一下,确保你能够了解都做了些什么事。打开 .vscode/launch.json: ?...name:你喜欢任何名称,它将显示调试工具栏: ? name url:浏览器将要加载URL——必须与运行 CRA 开发服务器 URL 相匹配! webRoot:项目源文件路径。...首先,你可以用 npm start 控制台中启动开发服务器,顺便说一下,这也可以 VS Code 完成。 ? 启动脚本 接下来,从调试侧边栏或通过按 F5 键启动调试浏览器: ?...确保调试侧栏打开了 Watch,并添加了一些表达式: ? 添加监视表达式 让我们尝试 fetch 一个存在内容,并留意表达式: ?

    2.5K20

    用动画方式理解事件循环机制,没有搞懂快来看看

    首先,什么是事件循环,为什么要关心? JavaScript 是单线程:一次只能运行一个任务。通常这没什么大不了,但是现在假设正在运行一个需要 30 秒任务。...该任务期间,我们等待 30 秒,然后才能发生其他事情(JavaScript 默认浏览器主线程上运行, 所以整个 UI 都卡住了) 。如果这样的话,想没有人想要一个缓慢、无响应网站。...这可以帮助我们创建一些异步、非阻塞行为。 当我们调用一个函数时,它会被添加到调用堆栈。调用堆栈是 JS 引擎一部分。它是一个堆栈,这意味着它是先进后出。...与此同时,setTimeout 函数和 response 函数从堆栈中弹出,它们都返回了它们值! Web API 计时器运行时间与我们传递给它第二个参数一样长,即 1000 毫秒。...回调函数不会立即添加到调用堆栈,而是传递给称为队列东西。 这可能是一个令人困惑部分:这并不意味着回调函数 1000 毫秒后被添加到调用堆栈!只是 1000 毫秒后被添加到队列

    69520

    提高 DevTools 控制台调试 console 12 种方法

    使用适当日志消息类型 console.log() 众所周知简单方法: console.log('no-frills log message'); 但这不是唯一类型。...JavaScript 对象显示属性交互式列表 console.dirxml( element ) 显示来自指定 HTML 或 XML 节点后代元素交互式树 console.clear() 清除控制台中所有以前消息...DevTools 控制台中结果是: 6....基于 Chrome 浏览器还允许您通过 debug( functionName ) 控制台中输入来设置断点,例如 debug( doSomething ); 该函数必须在全局名称空间中可用,并且浏览器将在调用调试器后立即启动...可以将其粘贴到文本编辑器,以方便阅读标记。 最后 浏览器 DevTools 已从基本控制台演变为复杂开发和调试环境。

    71210

    下一代前端语言之争,JavaScript 要被新语言反超?

    已经拥有专属于自己表现舞台,如果大家想要在浏览器运行高计算量原生代码,但 Wasm 就是最完美的选项。可如果不是这种情况,个人不太推荐用它进行日常前端开发。...希望这种语言能够浏览器运行良好,而且能顺畅适配现有 Web 生态系统。那些能编译成 Wasm 语言经常忽略 Web 生态系统其余部分,总想在浏览器建立起基于像素原生 UI。...也就是说,不排除 ReScript 代表着正确方向可能性。毕竟上次尝试已经是几年之前了,也许是记错了、也许已经变得更好了。...具体来说,觉得用 Rust 处理非安全代码块方式实现 JS 互操作性好办法。基本上,调用 JS 过程,我们需要将代码打包在一个非安全代码块。...这里要澄清一下,所指下一代前端语言绝不是单一语言,希望能有多种语言齐头并进、朝着前面提到方向共同探索。想激励更多朋友浏览器语言领域不断创新。

    39310

    学Python真的有用,看怎么控制手机

    下面这个不是必须,但很有必要:为了让我们开发脚本时更轻松,可以安装一个名为scrcpy开源程序,该程序允许我们使用鼠标和键盘在我们计算机上显示控制我们android手机设备。...在下面列出了命令列表以及如何使用它们,以供快速参考(英文不懂?好好查查吧) 4. 创建自拍计时器 哦,现在我们大概知道了能做什么,让我们开始吧,做一个简单例子。...将向你展示如何创建一个快速自拍计时器。...对来说,他们是(440,200)。 首先,我们必须导入与以前相同库,使用相同connect方法。 我们主要函数,我们可以调用connect函数,并为搜索栏x和y坐标分配一个变量。...注意这是一个字符串,而不是一个列表或元组,这样我们就可以轻松地将坐标合并到我们shell命令

    1.5K20

    浏览器原理 - 事件循环

    浏览器进程 可以浏览器任务管理器查看当前所有进程 其中,最主要进程有: 浏览器进程 主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同任务。...要处理这么多任务,主线程遇到了一个前所未有的难题:如何调度任务? 比如: 正在执行一个 JS 函数,执行到一半时候用户点击了按钮,该立即去执行点击事件处理函数吗?...正在执行一个 JS 函数,执行到一半时候某个计时器到达了时间,该立即去执行回调吗? 浏览器进程通知“用户点击了按钮”,与此同时,某个计时器也到达了时间,应该处理哪一个呢?... Chrome 源码开启一个不会结束 for 循环,每次循环从消息队列取出第一个任务执行,而其他线程只需要在合适时候将任务加入到队列末尾即可。...但浏览器必须有一个微队列,微队列任务一定具有最高优先级,必须优先调度执行。 面试题:JS 计时器能做到精确计时吗?为什么

    1.7K30
    领券