Javascript Closure функции

Question

Итак, я новичок в javascript, и я ищу способ подсчитать, сколько раз функция выполняется. Код случайным образом генерирует квадрат или круг, и при отображении фигуры отображается форма, когда вы нажимаете ее (время реакции). Это прекрасно работает и денди. Но я ищу способ отслеживать количество щелчков формы, а затем, в конечном итоге, суммарное время для вычисления среднего времени за клик. Если это помогает, я получаю довольно хороший фон на 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

Вот пример, который показывает, как замыкание может рассчитывать вызовы функции:

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>

Answer 2

У вас есть несколько проблем, но ответить на ваш вопрос:

• Вы не определяющую clicked как число (или любого другого типа), поэтому попытка выполнить операцию на undefined возвращается NaN. .. потому что хорошо, это не число.
• Ваша вторая попытка var i = 0; не будет работать, потому что i переопределяется при каждом вызове функции.

Вы должны иметь возможность использовать свою глобальную переменную clicked, если вы установите ее на ноль.

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.