Question

我正在使用AJAX和Jquery将json对象加载到我的网页中。它工作得很好但是它在json数据中加载到我的页面的时间有50-70％，它将第二组数据附加到我的页面，有没有一种方法可以确保我的数据只加载一次？

我最初的想法是让json调用同步而不是异步，但听起来不对，是否有更好的方法呢？

  $('#myResource').click(function() {
$.getJSON("data/preachers.json", function(result) {
  $.each(result, function(i, field) {

      $("#preachers").append( function() {
      var preacher = '<div class="box box1">';
      preacher += '<div class="image">';
      preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
      preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
      preacher += '</a>';
      preacher += '</div>'; //class = image
      preacher += '<div class="text">';
      preacher += '<p><h2>' + (field.name) + '</h2>';
      preacher += (field.details) + '</p>';
      preacher += '</div>'; //class=text
      preacher += '</div>'; //class=box
      return preacher;
      });
    });
  });
});

Answer 1

尝试

$('#myResource').unbind('click').click(function(){
})...

Answer 2

点击

后尝试禁用按钮

$('#myResource').click(function() {
   $('#myResource').prop('disabled' , true); //<<<<<<<<<<<<<<<< here
   $.getJSON("data/preachers.json", function(result) {
     $.each(result, function(i, field) {
      $("#preachers").append( function() {
      var preacher = '<div class="box box1">';
      preacher += '<div class="image">';
      preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
      preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
      preacher += '</a>';
      preacher += '</div>'; //class = image
      preacher += '<div class="text">';
      preacher += '<p><h2>' + (field.name) + '</h2>';
      preacher += (field.details) + '</p>';
      preacher += '</div>'; //class=text
      preacher += '</div>'; //class=box
      return preacher;
      });
      $('#myResource').prop('disabled' , false); //<<<<<<<<<<<<<<<<<<<<<<<  here
    });
  });
});

Answer 3

在一些评论的帮助下，答案最终是我需要在函数开头取消绑定点击，并使其保持未绑定状态：

  $('#myResource').click(function() {
      $( "#myResource").unbind( "click" );
      $.getJSON("data/preachers.json", function(result) {
      $.each(result, function(i, field) {
      console.log('load everything');
      $("#preachers").append( function() {
      var preacher = '<div class="box box1">';
      preacher += '<div class="image">';
      preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
      preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
      preacher += '</a>';
      preacher += '</div>'; //class = image
      preacher += '<div class="text">';
      preacher += '<p><h2>' + (field.name) + '</h2>';
      preacher += (field.details) + '</p>';
      preacher += '</div>'; //class=text
      preacher += '</div>'; //class=box
      return preacher;
      });
    });
  });
});

我的JSON数据使用AJAX加载两次，它只能在点击时加载一次

3 个答案: