Question

这是与性能相关的问题。我有一个Jquery可折叠div，有两个标题，分别是Hai和Label2。

当在标题上显示时，我正在进行后端调用，获取数据并附加到它。

我的问题是，如果一次又一次地使用相同的标签，我会一次又一次地对同一件事进行Ajax调用。

例如，如果我对Hai进行两次clcik（我正在进行两次ajax调用）

有可能避免这种情况吗？

这是我的代码

 $('.my-collaspible').on('collapsibleexpand', function () {

     var location_name = $(this).attr('data_attr');

     backendAjaxcall(location_name);


 });

 function backendAjaxcall() {
     // ajax call here 
 }

这是我的小提琴

http://jsfiddle.net/41w8b23q/4/

Answer 1

您可以在第一次点击时解除绑定，例如：

$('.my-collaspible').on('collapsibleexpand', function () {
    // your code
    ...
    // remove event
    $(this).off('collapsibleexpand');
});

您可能希望使用命名空间，因此您只需删除自己的代码：

$('.my-collaspible').on('collapsibleexpand.myajax', function () {
    // your code
    ...
    // remove event
    $(this).off('collapsibleexpand.myajax');
});

http://jsfiddle.net/41w8b23q/5/

Answer 2

@samjudson的答案比我的好，但为了告诉你如何完成我在评论中告诉你的事情：

var isAjaxLoaded = false;

function loadItems(){

  // Stops if the ajax is already loaded
  if(isAjaxLoaded == true){ return; }

  // otherwise, retrieves the content and updates the flag
  $.post(url, function(response){
     isAjaxLoaded = true;
  }
}

除此之外，您可能需要查看jQuery的函数.done()，以便在ajax的内容完成时获得更好的精度。

是否可以避免对此方案进行不必要的ajax调用。

2 个答案: