检测用户界面单击“操作/事件处理程序”

Question

我正在尝试找出不同的方法，我们可以使用它来检测Knockoutjs中的点击操作并为检测放置任何代码。我主要想要检测点击操作处理程序所花费的时间。

我尝试了什么？

我尝试使用绑定处理程序上提供的 Preprocess 函数挂钩绑定。我可以通过为特定的绑定句柄提供绑定预处理器来挂钩Knockout的逻辑来解释数据绑定属性。

因此，我修改了函数引用以添加拦截代码。显然，在之前添加代码，在之后添加代码。以下代码显示了该概念的工作版本。

＆＃13;

＆＃13;

ko.bindingHandlers.click.preprocess = function(value, name, addBindingCallback) {
           if (value.indexOf("function") > -1) {
              
                modifiedvalue = value.replace("function", "function __placeholderAnonymousFunction");
                // return value needs to be returned back, so that event bubble/Capture can be done correctly 
                modifiedvalue = modifiedvalue + "; var returnValue = __placeholderAnonymousFunction.apply($data, arguments); ";
            } else {
                // return value needs to be returned back, so that event bubble/Capture can be done correctly 
                modifiedvalue = "var returnValue = " + value + ".apply($data, arguments);";
            }

            var returnvalue = "function($data,$event){ " +
                "InterceptStart();"+
    				modifiedvalue +
                " ;InterceptEnd(); " +
                " return returnValue;" +
                " }";

            return returnvalue;
        }

var startTime;
var endTime;

function InterceptStart(){
  startTime = performance.now();
	console.log("start");
}

function InterceptEnd(){
  endTime = performance.now();
	console.log("end. Total time spent=" + (endTime - startTime));
}

var ViewModel = function() {
    var self = this;
    self.clickHandler = function() {
        console.log("in Click handler");
    };
    return self;
};
 
ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button data-bind='click: clickHandler'>Intercept Me</button>

＆＃13;

＆＃13;

＆＃13;

问题

1. 您是否看到上述代码存在任何问题。它处理点击处理程序可以是函数引用，匿名函数，使用bind调用的函数，apply的场景。它会在任何其他情况下失败吗？
2. 对于处理程序中的代码更新任何UI元素或更新绑定到HTML的任何observable的场景，是否可以挂钩knockoutjs或javascript中的任何可用函数，我可以在UI更新完成后调用它们。 目的是捕获事件处理程序+ UI更新所花费的时间。基本上，在单击操作完成后捕获脚本+渲染+绘制的时间。我应该在requestAnimationFrame或setTimeout中添加代码，以便在绘制结束时执行代码。类似于敲除组件绑定中的afterRender的东西。
3. 此类用例是否还有其他推荐方法？

注意：对于涉及XHR交互的点击处理程序，我挂钩到XMLHttpRequest，我已经有了代码。因此，XHR相互作用超出了这个问题的范围。

编辑1：我不是在寻找调试解决方案。这用于检测函数调用并将数据发送到另一个应用程序。

Answer 1

  

此类用例是否还有其他推荐方法？

我推荐的方法是使用浏览器的开发者工具......它们可以为您提供您想要的内容：在脚本（事件处理程序），布局和颜料上花费的时间。

例如:(记录在knockout documentation page）

• 黄色部分显示脚本编写时间。请注意来自Run Microtasks更新的deferred（我不认为您当前的代码会对这些更新...）
• 紫色部分是你的布局＆amp;风格更新
• 绿色部分是更新的UI绘制的位置