jQuery plugin to cycle through text and "typewrite" it out

Question

I have written a jQuery plugin (my first for a long time) that simply cycles through strings of text in a data attribute and uses setInterval to type it out - it's a common effect you've probably seen hundreds of times.

I'm looking for a code review of the JavaScript/jQuery portion of the code mainly because a lot of the literature on building a jQuery plugin is quite old and I want to be sure I'm doing things the "modern" way.

CodePen

$(document).ready(function() {
  $().typeText(); 
});

(function($) {

  $.fn.typeText = function(options) {

    var settings = $.extend({
      loopSpeed: 5000,
      typeSpeed: 100,
      selector: '.words'
    }, options);

    var typeIntervals = [];

    load();

    function load() {

      $(settings.selector).each(function() {
        var wordsArray = $(this).data('words').split(',');
        var length = wordsArray.length - 1;
        var index = 0;
        var thisWordGroup = $(this);;
        if (typeof $(this).data('index') == 'undefined') {
          $(thisWordGroup).data('index', 0);
        }
        $(this).html(wordsArray[0]);
      });

      setIntervals();

    }

    function setIntervals() {

      setInterval(function() {
        clearTypeIntervals();
        $(settings.selector).each(function() {
          var thisWordGroup = $(this);
          var wordsArray = thisWordGroup.data('words').split(',');
          var length = wordsArray.length - 1;
          var index = thisWordGroup.data('index');
          index++;
          if (index > length) {
            index = 0;
          }
          thisWordGroup.data('index', index);
          type(thisWordGroup, wordsArray[index]);
        });
      }, settings.loopSpeed);

    }

    function type($selector, word) {
      $selector.html('');
      var index = 0;
      var splitWord = word.split('');
      var splitWordLength = splitWord.length - 1;
      var intervalName = 'typeWordInterval' + Math.ceil(Math.random() * 99999);
      typeIntervals[intervalName] = setInterval(function() {
        var currentText = $selector.html();
        $selector.html(currentText + splitWord[index]);
        if (index < splitWordLength) {
          index++
        } else {
          clearInterval(typeIntervals[intervalName])
        }
      }, settings.typeSpeed);
    }

    function clearTypeIntervals() {
      for (var element in typeIntervals) {
        clearInterval(typeIntervals[element]);
      }
    }

  }

}(jQuery));

Answer 1

The API design is rather weird. You expect your plugin to be called like

$().typeText({ selector: '.words' })

But a design like this would be much more natural for jQuery:

$('.words').typeText()

Answer 2

  $(settings.selector).each(function() {
    var wordsArray = $(this).data('words').split(',');
    var length = wordsArray.length - 1;
    var index = 0;
    var thisWordGroup = $(this);;
    if (typeof $(this).data('index') == 'undefined') {
      $(thisWordGroup).data('index', 0);
    }
    $(this).html(wordsArray[0]);
  });

1. The variables length and index are unused, so you can just delete them.

2. There is no need to do all this typeof checking with "undefined"; if the data value you entered does not exist, it will return undefined, which will result as false in an if conditional.

---

function setIntervals() {

  setInterval(function() {
    clearTypeIntervals();
    $(settings.selector).each(function() {
      var thisWordGroup = $(this);
      var wordsArray = thisWordGroup.data('words').split(',');
      var length = wordsArray.length - 1;
      var index = thisWordGroup.data('index');
      index++;
      if (index > length) {
        index = 0;
      }
      thisWordGroup.data('index', index);
      type(thisWordGroup, wordsArray[index]);
    });
  }, settings.loopSpeed);

}

1. This small construct:

var index = thisWordGroup.data("index");
index++;
if (index > length) {
  index = 0;
}

This, with the incrementing in the middle along with the conditional makes this area a little clunky. These lines can be easily reduces using a ternary operator:

var index = thisWordGroup.data("index")++;
index = index > length ? 0 : index;

1. The incrementing ++ was moved to the same line that index was being stored. This looks more clean now, in my opinion.

2. The if conditional was converted into a ternary operator to set a new value to index. This also makes the code look more clean, in my opinion.

---

function clearTypeIntervals() {
  for (var element in typeIntervals) {
    clearInterval(typeIntervals[element]);
  }
}

1. In JavaScript, it is bad practice to iterate through an array using a for/in loop. You should be using a normal for loop:

for(var i = 0, length = typeIntervals.length; i < length; i++) {
    clearInterval(typeIntervals[i]);
}