Javascript 什么DOM事件将注册搜索的完成?
我刚刚读了一篇关于在Chrome开发工具中使用代码片段的文章,它立即适用于我正在研究的一个问题。我需要在我们的网站上建立一个特定类型搜索的性能基准,因此我开始编写一个代码段来测量从按钮单击到Ajax刷新所花费的时间。不过,Ajax刷新是我遇到麻烦的部分。一旦返回搜索结果,将触发什么事件,以便我可以抓取事件并标记经过的时间 以下是我目前掌握的情况:Javascript 什么DOM事件将注册搜索的完成?,javascript,jquery,google-chrome-devtools,dom-events,Javascript,Jquery,Google Chrome Devtools,Dom Events,我刚刚读了一篇关于在Chrome开发工具中使用代码片段的文章,它立即适用于我正在研究的一个问题。我需要在我们的网站上建立一个特定类型搜索的性能基准,因此我开始编写一个代码段来测量从按钮单击到Ajax刷新所花费的时间。不过,Ajax刷新是我遇到麻烦的部分。一旦返回搜索结果,将触发什么事件,以便我可以抓取事件并标记经过的时间 以下是我目前掌握的情况: var startSearch, endSearch, elapsedTime; var btn = document.querySelector('
var startSearch, endSearch, elapsedTime;
var btn = document.querySelector('button.btn');
var searchContentWrapper = document.querySelector('div.searchContents');
sessionStorage.removeItem('startSearch');
sessionStorage.removeItem('endSearch');
$(btn).on('click', function() {
startSearch = new Date();
sessionStorage.setItem('startSearch', startSearch.getTime());
console.info('%cSearch started: ' + startSearch, 'color:firebrick;font-size:18px');
});
$(searchContentWrapper).on('ajaxready', function() {
endSearch = new Date();
sessionStorage.setItem('endSearch', endSearch.getTime());
if (sessionStorage.getItem('startSearch')) {
console.info('%cSearch ended: ' + endSearch, 'color:firebrick;font-size:18px');
elapsedTime = parseInt(sessionStorage.getItem('endSearch')) - parseInt(sessionStorage.getItem('startSearch'));
console.info('%cSearch Duration: ' + elapsedTime + 'ms', 'color:firebrick;font-size:18px');
};
});
谢谢你的帮助 我根据@Michaël对上一个问题的回答找到了答案。结果如下:
var startSearch, endSearch, elapsedTime;
var btn = document.querySelector('button.btn');
var searchContentWrapper = document.querySelector('div.searchContents');
sessionStorage.removeItem('startSearch');
sessionStorage.removeItem('endSearch');
$(btn).on('click', function() {
console.clear();
startSearch = new Date();
sessionStorage.setItem('startSearch', startSearch.getTime());
console.info('%cSearch started: ' + startSearch, 'color:firebrick;font-size:18px');
});
$('body').on('ajaxready', searchContentWrapper, function(e) {
endSearch = new Date();
sessionStorage.setItem('endSearch', endSearch.getTime());
if (sessionStorage.getItem('startSearch')) {
console.info('%cSearch ended: ' + endSearch, 'color:firebrick;font-size:18px');
elapsedTime = parseInt(sessionStorage.getItem('endSearch')) - parseInt(sessionStorage.getItem('startSearch'));
console.info('%cSearch Duration: ' + elapsedTime + 'ms', 'color:firebrick;font-size:18px');
};
});