Javascript闭包函数
Javascript Closure functions
所以我是javascript的新手,我正在寻找一种计算函数执行次数的方法。代码随机生成一个正方形或圆形,并从显示的形状显示到单击它时(reactionTime(。这很好用。但我正在寻找一种方法来跟踪形状被点击的次数,然后最终计算每次点击的平均时间。如果有帮助的话,我有很好的C++背景。
为了计算点击次数,我考虑添加一个闭包函数。从这里:我如何知道一个函数用javascript/jquery调用了多少次?
myFunction = (function(){
var count = 0;
return function(){
count++
alert( "I have been called " + count + " times");
}
})();
从这里开始:函数计数调用
var increment = function() {
var i = 0;
return function() { return i += 1; };
};
var ob = increment();
但我尝试了一个全局变量和几个闭包函数的变体,但都没有成功(请查看注释(。我试着把闭包函数放在其他函数中。我还尝试了一些类似的东西:
var increment = makeBox();
我想知道是否有人能指引我走向正确的方向。非常感谢!
var clickedTime; var createdTime; var reactionTime;
var clicked; var avg = 0;
avg = (avg + reactionTime) / clicked;
document.getElementById("clicked").innerHTML = clicked;
document.getElementById("avg").innerHTML = avg;
function getRandomColor() {
....
}
function makeBox() { // This is the long function that makes box
createdTime = Date.now();
var time = Math.random();
time = time * 3000;
///////// var increment = function () {
var i = 0;
//return function() { return i += 1; };
i++;
return i;
///////// };
// clicked++; /////////// global variable returns NaN
// console.log(clicked);
// alert("Clicked: "+clicked);
setTimeout(function() {
if (Math.random() > 0.5) {
document.getElementById("box").style.borderRadius="75px"; }
else {
document.getElementById("box").style.borderRadius="0px"; }
var top = Math.random(); top = top * 300;
var left = Math.random(); left = left * 500;
document.getElementById("box").style.top = top+"px";
document.getElementById("box").style.left = left+"px";
document.getElementById("box").style.backgroundColor = getRandomColor();
document.getElementById("box").style.display = "block";
createdTime = Date.now();
}, time);
}
ob = increment(); //////////////////////// I think this gives me 1 every time
alert("Increment: "+ob); //////////////////
document.getElementById("box").onclick = function() {
clickedTime = Date.now();
reactionTime= (clickedTime - createdTime)/1000;
document.getElementById("time").innerHTML = reactionTime;
this.style.display = "none";
makeBox();
}
makeBox();
您有一些问题,但要回答您的问题:
- 您没有将
clicked
定义为数字(或任何其他类型(,因此尝试对undefined
执行操作会返回NaN
。。。因为这不是一个数字 - 您的第二次尝试
var i = 0;
将不起作用,因为在每个函数调用上都重新定义了i
只要将gobal变量clicked
设置为零,就应该能够使用它。
下面是一个例子,展示了闭包如何计数对函数的调用:
function add5(y) {
//A totally normal function
return y + 5;
}
var counter = 0, /*a counter scoped outside of the function counter function*/
trackedAdd5 = (function (func) {
/*This anonymous function is incrementing a counter and then calling the function it is passed*/
return function () {
counter++;
/*The trick is this function returns the output of calling the passed in function (not that it is applying it by passing in the arguments)*/
return func.apply(this, arguments);
}
})(add5); /*calling this tracking function by passing the function to track*/
document.getElementById('run').addEventListener('click', function () {
/*Here we are treating this new trackedAdd5 as a normal function*/
var y = document.getElementById('y');
y.value = trackedAdd5(parseInt(y.value, 10));
/*Except the outer counter variable now represents the number of times this function has been called*/
document.getElementById('counter').value = counter;
});
<label> <code>y = </code>
<input id='y' value='0' />
<button id='run'>add5</button>
</label>
<br/>
<label><code>add5()</code> was called
<input readonly id='counter' value='0' />times</label>
makeBox.click = 0; // define the function's counter outside the function
makeBox.click++; // replace the `i` usage with this inside the function
关于ob = increment();
:使用错误(多次重新定义ob
(;
var ob = increment(); // define it once
ob(); // increments the counter
// another way to define `increment`:
var increment = (function () {
var i = 0;
return function () {
return i += 1;
};
})();
ob = increment(); // ob becomes 1 initially
ob = increment(); // ob becomes 2, etc.
相关文章:
- 构造函数函数闭包变量
- var 函数名称与函数闭包中的名称分配
- 函数闭包
- 何时使用自包含函数(闭包),何时不使用自包含函数
- 避免在 JavaScript 中使用函数闭包
- 难以理解Javascript嵌套函数/闭包
- 在 Javascript 中优化函数闭包的使用有多大价值
- 调用超级构造函数(闭包编译器和库)
- 如何从浏览器控制台访问存储在函数闭包中的 javascript 变量
- 如何在 javascript 中访问父函数闭包
- 函数闭包中的另一个jQuery版本
- jquery对象文字函数/闭包-缺少一些明显的东西
- 这两个使用父类的函数闭包有什么区别吗?
- JavaScript自调用函数闭包不能正常工作
- 改变“;var”;在创建新实例的构造函数闭包内部
- 函数闭包显示外部函数的变量
- 如何使用jsdoc-toolkit记录匿名函数(闭包)
- .prototype不允许在函数闭包中使用
- 自调用匿名函数闭包内变量的生命周期
- 多个文件上的相同函数闭包