How to stop executing javascript after click?

Question

I have javascript code which automatically changing background of div. How I can stop this script when I click on link. I would like to stop changing background and show div with class="content" when I click on link class="one" or class="two". And I would like to start again changing background when I click class="start".

$(window).load(function() {
  var i = 0;
  var images = ['koles-3-ok.png', 'koles-3.png'];
  var image = $('.div1');
  var ImgPath = "" //The file path to your images
    //Initial Background image setup
  image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');

  //Change image at regular intervals
  setInterval(function() {
    image.fadeOut(1000, function() {
      image.css('background-image', 'url(' + images[i++] + ')');
      image.fadeIn(1000);
    });
    if (i == images.length)
      i = 0;
  }, 5000);
});

$(document).ready(function() {

  // Optional code to hide all divs
  $(".content").hide();
  // Show chosen div, and hide all others
  $("a").click(function(e) {
    $("#" + $(this).attr("class")).removeClass("hide").fadeIn("slow").siblings('.content').hide();
  });

});

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid black;
}
.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">Index</a>
<a href="#" class="one">About</a>
<a href="#" class="two" id="slide">Contact</a>

<div class="content hide" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content hide" id="two">
  <p>lorem 2
  </p>
</div>

<div class="div1">
  sdcsdf
</div>

jsfiddle: https://jsfiddle.net/omj1/d112y264/

Have a look at this: clearInterval

guitarman
– guitarman

2016-01-28 12:19:01 +00:00
Commented Jan 28, 2016 at 12:19 — guitarman
– guitarman, Commented Jan 28, 2016 at 12:19

drosam · Accepted Answer · 2016-01-28 12:21:29Z

2

You could save the intervalID returned by the setInterval() and then use the clearInterval() to stop it. See setInterval() and clearInterval()

answered Jan 28, 2016 at 12:21

drosam

2,8963 gold badges18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smdsgn · Accepted Answer · 2016-01-28 13:25:15Z

To achieve what you want, you can use the clearInterval() Method.

$(document).ready(function(){
   var i = 0;
   var myTimer;
   var images = ['http://katet.eu/images/koles-3-ok.png', 'http://katet.eu/images/koles-3.png'];
   var image = $('.div1');
   var ImgPath = "" //The file path to your images
   
   //Initial Background image setup
   image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');
      
   myTimer = setInterval(changeBackground, 3000);
      
   function changeBackground() {
         image.fadeOut(1000, function () {
            image.css('background-image', 'url('+ images[i++] +')');
            image.fadeIn(1000);
         });
         if(i == images.length) {
            i = 0;
         }
   }

   $("a").click(function (e) {
         e.preventDefault();
         if($(this).is(".one") || $(this).is(".two")) {
            if (myTimer) { 
               clearInterval(myTimer);
            }
         } 
         else {
            $(".content").hide();
            myTimer = setInterval(changeBackground, 3000);
         }
         $("#" + $(this).attr("class")).removeClass("hide").fadeIn("slow").siblings('.content').hide();
   });
      
});

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid black;
}
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="slide">Paintings</a>
<a href="#" class="one">About</a>
<a href="#" class="two" id="slide">Contact</a>
    
<div class="content hide" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content hide" id="two">
  <p>lorem 2</p> 
</div>
      
<div class="div1">sdcsdf</div>

Do not forget to validate the answer if it solved your problem. It can help someone else.

KodeRex · Accepted Answer · 2016-01-28 12:19:59Z

0

Well, according to me you cannot disable javascript. Because the button would need controls (javascript) to enable and disable javascript on user requirements. Well you can stop some functions i.e.

function demo(){
document.writeln("Hello, World");
}

HTML Button markup

<button onClick="demo.stop()">Stop Function</button>

The .stop() will prevent the demo() to execute.

I hope this clarifies. Thanks.

answered Jan 28, 2016 at 12:19

KodeRex

95 bronze badges

1 Comment

James Thorpe Over a year ago

This will throw an error along the lines of Uncaught TypeError: demo.stop is not a function

Sujithrao · Accepted Answer · 2016-01-28 12:39:53Z

$(window).load(function() {
  var i = 0;
  var images = ['koles-3-ok.png', 'koles-3.png'];
  var image = $('.div1');
  var ImgPath = "" //The file path to your images
    //Initial Background image setup
  image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');

  //Change image at regular intervals
  setInterval(function() {
    image.fadeOut(1000, function() {
      image.css('background-image', 'url(' + images[i++] + ')');
      image.fadeIn(1000);
    });
    if (i == images.length)
      i = 0;
  }, 5000);
});

$(document).ready(function() {

  $(".start").click(function(e) {
      $(".div1").show();
      $("#one").hide();   
      $("#two").hide();                       
  });
  $(".one").click(function(e) {
      $(".div1").hide();
      $("#one").show();
      $("#two").hide();  
  });
  $(".two").click(function(e) {
      $(".div1").hide();
      $("#one").hide();
      $("#two").show();  
  });
});

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid black;
}
.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">Index</a>
<a href="#" class="one">About</a>
<a href="#" class="two" id="slide">Contact</a>

<div class="content" style="display:none;" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content" style="display:none;" id="two">
  <p>lorem 2
  </p>
</div>

<div class="div1">
  sdcsdf
</div>

Collectives™ on Stack Overflow

How to stop executing javascript after click?

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related