Tips to refactor code : very repetitive code I have this very simple problem : my code is too repetitive. It works, but it could be much cleaner. I don't know exactly where to start. 

I'd like to learn to work better, and I'd really like someone to help me with it.

Here's the 2 bits of my code that are very repetitive (everything I've done myself) :

$(document).ready(function () {

  // Setup your Lazy Line element.
  // see README file for more settings
  $('#drawing1').lazylinepainter({
      'svgData': dr1,
      'strokeWidth': 1.2,
      'strokeColor': '#65615a',
      'onComplete': function () {

      }
    })

  $('#drawing2').lazylinepainter({
      'svgData': dr2,
      'strokeWidth': 1.2,
      'strokeColor': '#65615a',
      'onComplete': function () {

      }
    })

  $('#drawing3').lazylinepainter({
      'svgData': dr3,
      'strokeWidth': 1.2,
      'strokeColor': '#65615a',
      'onComplete': function () {

      }
    })

  $('#drawing4').lazylinepainter({
      'svgData': dr4,
      'strokeWidth': 1.2,
      'strokeColor': '#65615a',
      'onComplete': function () {

      }
    })

  $('#drawing5').lazylinepainter({
      'svgData': dr5,
      'strokeWidth': 1.2,
      'strokeColor': '#65615a',
      'onComplete': function () {

      }
    })

  // Paint your Lazy Line, that easy!

})

})(jQuery);


Second part of the code:

var eventsFiredDr1 = 0;

var drawing1 = function () {
  if(eventsFiredDr1 == 0) {

    $('#drawing1').lazylinepainter('paint');

    eventsFiredDr1++; // &lt;-- now equals 1, won't fire again until reload
  }
}

var eventsFiredDr2 = 0;

var drawing2 = function () {
  if(eventsFiredDr2 == 0) {

    $('#drawing2').lazylinepainter('paint');

    eventsFiredDr2++; // &lt;-- now equals 1, won't fire again until reload
  }
}

var eventsFiredDr3 = 0;

var drawing3 = function () {
  if(eventsFiredDr3 == 0) {

    $('#drawing3').lazylinepainter('paint');

    eventsFiredDr3++; // &lt;-- now equals 1, won't fire again until reload
  }
}

var eventsFiredDr4 = 0;

var drawing4 = function () {
  if(eventsFiredDr4 == 0) {

    $('#drawing4').lazylinepainter('paint');

    eventsFiredDr4++; // &lt;-- now equals 1, won't fire again until reload

  }
}

var drawing5 = function () {
  if(eventsFiredDr5 == 0) {

    $('#drawing5').lazylinepainter('paint');

    eventsFiredDr5++; // &lt;-- now equals 1, won't fire again until reload

  }
}

$(window).resize(function () {
  if($(window).width() &lt; 820) {

    $("svg").hide()
    $(".fallback").show()
    $("#drawing2").css("height", "auto")
  }
});

if($(window).width() &gt; 820) {

  $(".fallback").hide()

  $(window).scrollStopped(function () {
    if($("#drawing1").is(":within-viewport")) {
      drawing1()
    }

    if($("#drawing2").is(":within-viewport")) {
      drawing2()
    }

    if($("#drawing3").is(":within-viewport")) {
      drawing3()
    }

    if($("#drawing4").is(":within-viewport")) {
      drawing4()
    }

    if($("#drawing5").is(":within-viewport")) {
      drawing5()
    }

  });


( I know I should put DOM elements in variables, but I planned on doing it when I would refactor the code. )

My first guess would be creating an array but.. No idea how to use it in my code. (I'm a big beginner)
For the code repetition you can use

$(function () { // shorter form of document-ready
    $.each([dr1, dr2, dr3], function (index, data) {
        $('#drawing' + (index + 1)).lazylinepainter({
            svgData: data,
            strokeWidth: 1.2,
            strokeColor: '#65615a',
            onComplete: function () {}
        });
    });
});


For the second part, use boolean values as Josay suggested but place the fired flag inside a function that returns a closure. Each call to createPaintGuard establishes its own fired flag without having to package them all into an array or object.

function createPaintGuard(index) {
    var fired = false;
    return function () {
        if (!fired) {
            $('#drawing' + index).lazylinepainter('paint');
            fired = true;
        }
    };
}

var drawing1 = createPaintGuard(1);
var drawing2 = createPaintGuard(2);
var drawing3 = createPaintGuard(3);


Note that I would probably store the three drawingX variables into an array instead of individually-named variables, but I have no idea how they're being used in the wider context. The code here should be a drop-in replacement for yours.