Question

所以我是javascript的新手，我正在寻找一种计算函数执行次数的方法。代码随机生成一个正方形或圆形，并在单击它时显示形状显示（reactionTime）。这工作得很好，花花公子。但我正在寻找一种方法来跟踪单击形状的次数，然后最终计算平均每次点击时间的累计时间。如果它有帮助，我来自一个非常好的C ++背景。

为了计算点击次数，我想添加一个闭包功能。从这里开始：How do I find out how many times a function is called with javascript/jquery?

    myFunction = (function(){
        var count = 0;
        return function(){
            count++
            alert( "I have been called " + count + " times");
        }
     })();

从这里开始：Function count calls

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

Answer 1

你有一些问题，但要回答你的问题：

您未将clicked定义为数字（或任何其他类型），因此尝试对undefined执行操作会返回NaN ...因为，它＆＃ 39;不是数字。
您的第二次尝试var i = 0;无法正常工作，因为每个函数调用都会重新定义i。

只要您将其设置为零，就可以使用您的全局变量clicked。

Answer 2

这是一个示例，显示闭包如何计算对函数的调用：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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.

Javascript Closure函数

3 个答案: