Fail to create a plugin in Javascript

Question

I am new to Javascript programming and I'm trying to learn it by myself. I tried to make a plugin which allows element assigned moving back and forth, but it does not work. Could anyone help me and tell me what the problem with my code? Below is the code with I am trying to develop my plugin.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
    </head>
<body>
    <a href="#" style="position:relative">Hello, world</a>
    <img src="car.png" style="width:100px; height:60px">
    <p>Hello, world</p>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        (function( $ ) 
        {
            $.fn.showLinkLocation = function() 
            {    
                move();
                function move()
                {
                    $(this).animate({left: '500px'}, 1000).animate({left: '0px'}, 1000);
                    move();
                };  
            };
        }( jQuery ));
        $( "a" ).showLinkLocation();
    </script>
</body>
</html>

Try moving `( jQuery )` outside the parenthesis: `( function( $ ){ ... })( jQuery )`. Also, `this` inside you function `move` will be the `window` object. — Karl-André Gagnon, Oct 06 '17 at 15:24
also... you have an infinite loop. move move into the callback. — Kevin B, Oct 06 '17 at 15:29

Akshay Hegde · Answer 1 · 2017-10-06T15:54:14.340

(function($) {
  $.fn.showLinkLocation = function() {
    this.animate({
      left: '500px'
    }, 1000).animate({
      left: '0px'
    }, 1000);
    return this;
  };
})(jQuery);
$("a").showLinkLocation();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" style="position:relative">Hello, world</a>

Cause :

You got, recursive call not gonna break, infinite loop :

function move(){
   ...
   move();
};

Explanation:

Using jQuery rather than $ ensures there are no conflicts with other JavaScript libraries. All our internal code should also refer to jQuery rather than $.

(function($) {
    $.fn.showLinkLocation = function() { ... };
})(jQuery);

This function runs immediately and is passed jQuery as a parameter named $. Since $ is a local variable, we can assume that it always refers to the jQuery library rather than another library that grabbed the global $ variable first.

this refers to jQuery, so we can access jQuery's methods directly, like this.each(...
return this; return the jQuery object so other methods can be chained

Please add an explanation of what was wrong, what you changed, and why. — David says reinstate Monica, Oct 06 '17 at 15:28

Mohit Bhardwaj · Answer 2 · 2017-10-06T15:34:03.817

I think what was wrong with your code is that, inside the inner move function, you did not have access to its outer this variable, which was the target element in this case.

So, you needed to keep outer this in a separate variable, so it's not overriden by the function in that function's context. In any case, I think Akshay Hegde's solution below is much cleaner.

Another issue is that you are calling move() repeatedly which eventually will crash the browser. You should wait for the first animation to complete, before starting it again.

(function( $ ) {
$.fn.showLinkLocation = function() {    
  var $this = this;
  move();
  function move(){
    console.log("move called" + new Date().getTime() );
    $this.addClass("animating").animate({left: '500px'}, 1000).animate({left: '0px'}, 1000);
    //move();
  };  
};
}( jQuery ));
$( "a" ).showLinkLocation();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<a href="#" style="position:relative">Hello, world</a>
<img src="car.png" style="width:100px; height:60px">
<p>Hello, world</p>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

Please add an explanation of what was wrong, what you changed, and why. — David says reinstate Monica, Oct 06 '17 at 15:28

Fail to create a plugin in Javascript

2 Answers2