JavaScript 闭包函数

标签 javascript function closures

所以我是 javascript 的新手,我正在寻找一种方法来计算函数执行的次数。该代码随机生成一个正方形或圆形,并从显示形状到单击它时显示( react 时间)。这工作得很好而且花花公子。 但我正在寻找一种方法来跟踪单击形状的次数,然后最终跟踪累积时间来计算每次单击的平均时间。如果有帮助的话,我有很好的 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();

最佳答案

您遇到了一些问题,但要回答您的问题:

  • 您没有将 clicked 定义为数字(或任何其他类型),因此尝试对 undefined 执行操作会返回 NaN。 ..因为好吧,这不是一个数字。
  • 您的第二次尝试 var i = 0; 将不起作用,因为 i 会在每次函数调用时重新定义。

只要将您的全局变量clicked设置为零,您就应该能够使用它。

关于JavaScript 闭包函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32170004/

相关文章:

javascript - 如何在java脚本中制作倒数计时器,它不应该在页面重新加载时重置

PHP 文件处理和 fread 错误

javascript - 了解 v8 中的 javascript 闭包变量捕获

javascript - 执行一致性和性能的原型(prototype)或闭包?

javascript - 如何在 javascript 中查找并替换一组没有 id 或名称的现有 td 背景图像?

javascript - AngularJS ng- View 不工作

javascript - 在 jQuery 中重复单击事件而不删除先前的单击效果

javascript - 全局变量在函数中使用时返回未定义

c - 函数只返回字符串的字母

javascript - 是否可以访问匿名函数中的函数?