jQuery Decremental Loop

Question

I need to make a jQuery incremental/decremental loop.

So I'm posting the vanilla JavaScript here, Can anyone change this into jQuery code for me please.

var incomeTicker = 60;

window.setInterval(function(){
 
  if (incomeTicker > 0){
   incomeTicker--;
  document.getElementById("incomeTicker").innerHTML = "Next Profit In : " + incomeTicker + " seconds";
// other code implemented as long as incomTicker > 0

 }
 
 if (incomeTicker <= 1){
  
  //code that is implemented when incomeTicker <=1
 
  incomeTicker = 60;
  
  //code that is implemented when incomeTicker <=1
 }
}, 1000);

<span class = "incomeTicker" id = "incomeTicker" > Next Profit In : 100 seconds</span>

Can anyone help translate this into jQuery? It must decrement and then reset after loop is complete as shown in the snippet

The only thing you'd need to change is `$()` instead of `document.getElementById()` and the `.html()` method instead of `.innerHTML = `. — nnnnnn, Aug 09 '17 at 03:49
As jQuery doesn't really do intervals or increments, all you really need to convert that to jQuery is `$('#incomeTicker').html('Next Pro...')` tada ! — adeneo, Aug 09 '17 at 03:50

score 2 · Accepted Answer · answered Aug 09 '17 at 03:55

2

Here you go with a solution https://jsfiddle.net/vh0obhz6/

var incomeTicker = 60;

window.setInterval(function(){
   if (incomeTicker > 1){
      incomeTicker--;
      $("#incomeTicker").html(`Next Profit In : ${incomeTicker} seconds`);
   }else{
      incomeTicker = 60;
   }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class = "incomeTicker" id = "incomeTicker" > Next Profit In : 100 seconds</span>

answered Aug 09 '17 at 03:55

Shiladitya

12,003
15
25
38

it is not working -- it update in log with error but does not affect the DOM – Cornelius Labuschagne Aug 09 '17 at 03:56
{ "message": "Uncaught ReferenceError: $ is not defined", "filename": "https://stacksnippets.net/js", "lineno": 19, "colno": 7 } { "message": "Uncaught ReferenceError: $ is not defined", "filename": "https://stacksnippets.net/js", "lineno": 19, "colno": 7 } { "message": "Uncaught ReferenceError: $ is not defined", "filename": "https://stacksnippets.net/js", "lineno": 19, "colno": 7 } { "message": "Uncaught ReferenceError: $ is not defined", "filename": "https://stacksnippets.net/js", "lineno": 19, "colno": 7 } – Cornelius Labuschagne Aug 09 '17 at 03:58
You are missing jQuery, add the library – Shiladitya Aug 09 '17 at 03:58

score 2 · Answer 2 · answered Aug 09 '17 at 04:22

You should use more jQuery, it does all things.

Here's how you'd add more jQuery

$.incomeTicker = 60;

(function rec() {
  $.each((new Array($.incomeTicker)).fill(0), function(i) {
    var sec = Math.abs(i - $.incomeTicker);
    $('#incomeTicker').delay(1000).queue(function(n) {
      $(this).html("Next Profit In : " + sec + " seconds"); 
      n(); if (sec === 1) rec();
    });
  });
})();

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

score 1 · Answer 3 · answered Aug 09 '17 at 03:56

var incomeTicker = 60;

window.setInterval(function(){

    if (incomeTicker > 0){
        incomeTicker--;
        $("#incomeTicker").html("Next Profit In : " + incomeTicker + " seconds");
// other code implemented as long as incomTicker > 0

    }

    if (incomeTicker <= 1){

  //code that is implemented when incomeTicker <=1

  incomeTicker = 60;

  //code that is implemented when incomeTicker <=1
    }
}, 1000);

jQuery Decremental Loop

3 Answers3