Why does this simple javascript execute multiple times?

Question

Why does this javascript execute 2-4 times per page load:

// mei_library_turn.js
(function ($, Drupal) {
  Drupal.behaviors.mei_library_turn = {
    attach: function() {

      console.log('ready1');

      // There would be a lot more code in here, but I've stripped it all out to debug.

    }
  };

})(jQuery, Drupal, drupalSettings);

That is the entirety of the javascript file. What could possibly be causing this to fire multiple times? The script is not included in the head of the document multiple times.

Most often, when I load the page, it fires 3-4 times. Sometimes just two times.

I realize once() can be used to mask problems like these, but it adds complexity to scripts and I would like to understand what is causing the code to execute multiple times in the first place.

Here is the page where I attach the library:

public function book($marc_num) {

    $output = [];

    $output['something']['#attached']['library'][] = 'mei_library/librarybook';

    return $output;

  }

Here is my libraries file:

librarybook:
  version: 1.x
  js:
    js/mei_library_turn.js: {}

Answer 1

Behaviors will be executed on every request, including AJAX requests.

you can use the once function to make sure it is only triggered once.

(function ($, Drupal) {
  Drupal.behaviors.mei_library_turn = {
    attach: function(context, settings) {

       $('main', context).once('mei_library_turn').each(function () {
          console.log('ready1');
       };)


      // There would be a lot more code in here, but I've stripped it all out to debug.

    }
  };

})(jQuery, Drupal, drupalSettings);