简化jQuery代码

Question

I have these two codes I've done to load data on scroll and display it in two different divs (.cat_a and .cat_b).

Data is stored as objects in a json file and printed out 3 at a time from get_data.php.

I'm not familiar with JS and jQuery, is there a way to simplify and clean them?

Load data on (div class=".cat_a"):

<script type="text/javascript">
  $(document).ready(function() {

    var flag = 0;

    $.ajax({
      type: 'GET',
      url: 'get_data.php',
      data: {
        'offset': 0,
        'limit': 3,
        'cat': "cat_a"
      },
      success: function(data) {
        $('.cat_a').append(data);
        flag += 3;
      }

    });

    $(window).scroll(function() {
      if ($(window).scrollTop() >= $(document).height() - $(window).height()) {

        $.ajax({
          type: 'GET',
          url: 'get_data.php',
          data: {
            'offset': flag,
            'limit': 3,
            'cat': "cat_a"
          },
          success: function(data) {
            $('.cat_a').append(data);
            flag += 3;
          }
        });

      }
    });
  });
</script>

Load data on (div class=".cat_b"):

<script type="text/javascript">
  $(document).ready(function() {

    var flag = 0;

    $.ajax({
      type: 'GET',
      url: 'get_data.php',
      data: {
        'offset': 0,
        'limit': 3,
        'cat': "cat_b"
      },
      success: function(data) {
        $('.cat_b').append(data);
        flag += 3;
      }

    });

    $(window).scroll(function() {
      if ($(window).scrollTop() >= $(document).height() - $(window).height()) {

        $.ajax({
          type: 'GET',
          url: 'get_data.php',
          data: {
            'offset': flag,
            'limit': 3,
            'cat': "cat_b"
          },
          success: function(data) {
            $('.cat_b').append(data);
            flag += 3;
          }
        });

      }
    });
  });
</script>

Answer 1

I reduced the redundancies in your code and added comments.

$(document).ready(function() {
  //create a method that can be called for each category
  //it also scopes a flag variable for each one
  function getDataFor(category) {
    var flag = 0;

    //the ajax call is made the same for the initial call and on scroll
    //so that's another method
    function getData() {
      $.ajax({
        type: 'GET',
        url: 'get_data.php',
        data: {
          'offset': 0,
          'limit': 3,
          'cat': category
        },
        success: function(data) {
          $('.' + category).append(data);
          flag += 3;
        }
      });
    }

    getData(); //do our initial ajax call for the category

    //these jQuery variables are made multiple times in the scroll event
    //so we can cache them for some performance
    var $window = $(window);
    var $document = $(document);

    $window.on('scroll', function() {
      if ($window.scrollTop() >= $document.height() - $window.height()) {
        //call our ajax again on scroll when needed
        getData();
      }
    });
  }

  //call the method for each category we want to perform the logic on
  getDataFor('cat_a');
  getDataFor('cat_b');
});

</div>