javascript - Jquery onClick页面加载缓慢？

Question

我认为我的 jquery ajax 页面加载有点慢。当我使用 onClick 处理程序单击我的 href 时，有时它没有响应，我必须双击？我怎样才能避免这种情况？

     <a target="_blank" class="arrow" href="javascript:void();" 
            onclick="f(\"value",\"value\");return false;">
                <div class="teaser">
                  <h3></h3>
                  <p class="subheadline"></p>
                  <hr class="divider">
                  <p></p>
                </div>
                <img height="353" class="img" src="example.jpg" width="374">
      </a>

也许是因为 empy h3 和 p 标签？感觉有点迟钝？？

我的函数 f 是：

function f (url, id)
{
  var btn = $(this);
  if (btn.data('running'))
     return;

   $j('#tx #singleview').empty();
   btn.data('running', true);

   url="http://"+url+"index.php?id="+id+"&eID=tx";
   url_stack.push(url);

   $j.getJSON(url, function(json) {

    $('#container').css({
      "z-index" : "-100",
      "margin-left" : "148",
      "top" : "-800"      
    })

   $('#container').animate({
      "opacity": "0.0",
      "top": '+=800'
    }, 900, function() {
      // Animation complete.
    });

   var singleview = $j('#tx #singleview');
   singleview.css({
     "position": "relative",
     "top": "-800px",
     "height": "800px"
   })
   singleview.append($j("#singleviewTemplate").tmpl(json).css({
     "visibility": "visible",
     "position": "relative"
     }));
   singleview.animate({
     opacity: 100.0,
     top: 0
   }, 900, function() {
     // Unset it here, this lets the button be clickable again
     btn.data('running', false);
   });      
 });
}

score 0 · Accepted Answer

经过数小时的实验，我能够加快速度：

动画完成后，我稍后会触发我的 ajax getjson 加载。

我已经将许多 Jquery animate css append 函数合并在一起

function singleview (url, id)
{
var btn = $(this);
if (btn.data('running'))
  return;

var c = $('#container');
var s = $j('#tx #singleview');

s.empty();
btn.data('running', true);

url="http://"+url+"index.php?id="+id+"&eID=tx";

if (url_stack.length == 0 && url_back.length > 0)
{
  bak = url_back.pop();
  url_stack.push(bak);
  url_back.push(bak);
  url_stack.push(url);
} else
{
  url_stack.push(url);  
}

c.css({
  "z-index" : "-100",
  "position": "absolute",
  "left" : "140px",
  "top" : "0px"
}).animate({
  "position": "relative",
  "opacity": "0.0",
  "top": "+=600px",
  "left" : "140px"
}, 900, function() {
  // Animation complete.
  $j.getJSON(url, function(json)
  {
    s.css({
      "position": "absolute",
      "top": "-600px",
      "height": "600px",
      "left" : "140px"
    }).animate({
      "opacity": "100.0",
      "top": "10px",
      "left" : "140px"
    }, 900, function() {
      // Unset it here, this lets the button be clickable again
      btn.data('running', false);
    }).append($j("#singleviewTemplate").tmpl(json).css({
      "visibility": "visible",
      "position": "relative"
    }));
 });      
});

}

score 0 · Accepted Answer

您应该使用FireBug或其他东西来检查服务器的响应时间，但绝对应该从指定它的 TYPO3 开始您的问题。

在某些情况下， BareeID可以消耗大约 700 毫秒来呈现最简单的输出（“bare”字的重音）。如果在您的扩展中，您有大量来自 DB 的数据 + 一些表格，joins则呈现非常简单的结果集可能会非常慢。它当然可以改进，但首先你必须确定问题出在哪里。

我们上次遇到这样的问题，即仅来自 5k 条记录的分页结果需要大约 30 秒来为 JS 网格呈现每页 50 个项目的排序项目（冲击），经过一些简单的调整后，我们完成了每个结果页面 500 毫秒。这绝对是关于我们在TYPO3扩展中的错误查询，而 AJAX 只能等待，我认为你应该在一开始就在那里搜索。

编辑：

为了确保在 TYPO3 方面有很长的时间，您还应该创建一个static file包含一些示例数据集（类似于 TYPO3 预期的数据集）并检查它的行为方式。

javascript - Jquery onClick页面加载缓慢？

2 回答 2

Related

Reference