- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 JavaScript 新手,不太了解原型(prototype)设计过程。我被这个问题困扰了:
我想创建一个基于原型(prototype)的秒表(用于进一步增强)。秒表适用于用户交互(开始/停止)并以秒为单位显示耗时。
通过将开始时间存储在实例属性中,然后从实际时间中减去该值来计算耗时。
我的问题是,在开始函数设置开始时间后,它在调用更新函数时消失(因此更新函数根本无法获取开始值)。此后,当停止函数被触发时,停止函数不会获取耗时值。
我的猜测是这些函数不是在实例上调用的,而是在原型(prototype)上调用的。
请帮助我更好地理解这段代码中原型(prototype)和实例的大概情况,并帮助我找到问题和解决方案。谢谢!
var StopWatch = function () {
this.startTime = 0;
this.elapsedTime = 0;
};
StopWatch.prototype.start = function () {
StopWatch.call(this);
this.startTime = now();
this.updateElapsedTime();
};
StopWatch.prototype.updateElapsedTime = function () {
StopWatch.call(this);
this.elapsedTime = now() - this.startTime;
this.triggerNextTimeUpdate();
};
StopWatch.prototype.triggerNextTimeUpdate = function () {
StopWatch.call(this);
this.timer = setTimeout(this.updateElapsedTime.bind(this), 1000);
};
StopWatch.prototype.stop = function () {
StopWatch.call(this);
clearTimeout(this.timer);
};
查看整个代码的代码片段:
/*
* JavaScript StopWatch for worklog time measurement
*/
//**************************************************
// Helpers
//**************************************************
var now = function () {
return Math.round(new Date().getTime() / 1000);
};
//**************************************************
// Stopwatch functionality
//**************************************************
var StopWatch = function () { // PROTOTYPE (class definition & constructor)
this.startTime = 0;
this.elapsedTime = 0;
};
StopWatch.prototype.createDivInstance = function () {
StopWatch.call(this);
var newDivInstance = document.body.appendChild(document.createElement("div"));
newDivInstance.className = "jssw";
newDivInstance.innerHTML = "" +
"<span class='elapsedTime'>" + this.elapsedTime + "</span><br>" +
"<span class='buttons'>" +
"\< <span id='start'>Start</span> | <span id='stop'>Stop</span> \>" +
"</span>";
var start = document.getElementById('start');
var stop = document.getElementById('stop');
start.addEventListener("click", this.start.bind(this));
stop.addEventListener("click", this.stop.bind(this));
};
StopWatch.prototype.start = function () {
StopWatch.call(this);
this.startTime = now();
this.updateElapsedTime();
};
StopWatch.prototype.updateElapsedTime = function () {
StopWatch.call(this);
this.elapsedTime = now() - this.startTime;
document.querySelector(".jssw span.elapsedTime").innerHTML = this.elapsedTime;
this.triggerNextTimeUpdate();
};
StopWatch.prototype.triggerNextTimeUpdate = function () {
StopWatch.call(this);
this.timer = setTimeout(this.updateElapsedTime.bind(this), 1000);
};
StopWatch.prototype.stop = function () {
StopWatch.call(this);
clearTimeout(this.timer);
};
var swInstance = new StopWatch();
swInstance.createDivInstance();
<html>
<head>
<title>How do javascript objects work?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script></script>
</body>
</html>
最佳答案
您的 StopWatch.call(this)
调用将在每次调用时重置 startTime
和 elapsedTime
,这就是该函数的作用.
删除这些调用,您应该就没事了。
关于javascript - 如何使用原型(prototype)函数更新实例属性并从另一个函数访问它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33064931/
你能比较一下属性吗 我想禁用文本框“txtName”。有两种方式 使用javascript,txtName.disabled = true 使用 ASP.NET, 哪种方法更好,为什么? 最佳答案 我
Count 属性 返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
CompareMode 属性 设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
Column 属性 只读属性,返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
AvailableSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive 
Attributes 属性 设置或返回文件或文件夹的属性。可读写或只读(与属性有关)。 object.Attributes [= newattributes] 参数 object
AtEndOfStream 属性 如果文件指针位于 TextStream 文件末,则返回 True;否则如果不为只读则返回 False。 object.A
AtEndOfLine 属性 TextStream 文件中,如果文件指针指向行末标记,就返回 True;否则如果不是只读则返回 False。 object.AtEn
RootFolder 属性 返回一个 Folder 对象,表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
Path 属性 返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。 说明 对于驱动器,路径不包含根目录。
ParentFolder 属性 返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。 说明 以下代码
Name 属性 设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
Line 属性 只读属性,返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。 说明 文件刚
Key 属性 在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary 
Item 属性 设置或返回 Dictionary 对象中指定的 key 对应的 item,或返回集合中基于指定的 key 的&
IsRootFolder 属性 如果指定的文件夹是根文件夹,返回 True;否则返回 False。 object.IsRootFolder object 应为&n
IsReady 属性 如果指定的驱动器就绪,返回 True;否则返回 False。 object.IsReady object 应为 Drive&nbs
FreeSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
FileSystem 属性 返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。 说明 可
Files 属性 返回由指定文件夹中所有 File 对象(包括隐藏文件和系统文件)组成的 Files 集合。 object.Files object&n
我是一名优秀的程序员,十分优秀!