0

I need help inserting something llike a delay between executing that "code()".For example I want it to execute one after another every 4 seconds.So like first one executes, that after 4 seconds the code executes again and so on for each of the elements with given class.

Im also using .this in that "code()" so I need it to stay there because for example im getting the id of every given class and using that.

var myFunction = function(){

        $(".someClass").each( function(){

            if( this.style.opacity != "0.5" ){


                code();


            }

        });
    };
Luka Čelebić
  • 1,025
  • 11
  • 20

1 Answers1

3

You could simply use each loop index to delay it using timeouts:

var myFunction = function() {
  $(".someClass").each(function(i) {
    setTimeout(function() {
      if (this.style.opacity != "0.5") {
        code();
      }
    }.bind(this), i * 4000); // bind relevant context
  });
};

Other version, using filter():

var myFunction = function() {
  $(".someClass").filter(function(){
    return this.style.opacity != "0.5";
  }).each(function(i) {
    setTimeout(code.bind(this), i * 4000);
  });
};
A. Wolff
  • 72,298
  • 9
  • 84
  • 139
  • The first version of the code works great, but what if i want it to check first for each element the opacity and only if that is true then execute the code. Because now for example if first two are false and third is true it waits 8 seconds for each before coming to third and executing the code. – Luka Čelebić Dec 05 '16 at 19:34
  • The second one using filter() should work as you expect it – A. Wolff Dec 05 '16 at 19:57
  • Now it does first check for opacity for all elements of that class but in that second code it executes that "code()" even faster than 4 seconds and if there is one element that is true it executes the code on it multiple times...it doesnt go to the next one if there is more... – Luka Čelebić Dec 06 '16 at 16:03
  • @Tyrone It works as expected here: https://jsfiddle.net/mbehkrpx/ So you should provide jsFiddle replicating your issue. Maybe your issue has something to do with code in `code()`?! Are you changing `opacity` of element in this callback method? – A. Wolff Dec 06 '16 at 16:53
  • @Tyrone And as a side note, you should check opacity using `$(this).css('opacity') != 0.5` instead of `this.style.opacity != "0.5"`. But the best would be to handle opacity in CSS using a class and check if element has this class – A. Wolff Dec 06 '16 at 16:58
  • https://jsfiddle.net/mbehkrpx/6/ Im guessing its something obvious but idk what is wrong. The openT function is the "code()" that i need to use btw and it need to get a llink as a parameter everytime, and that is "https://www.something.com/something/" + this.id.split("-")[2] – Luka Čelebić Dec 06 '16 at 17:25
  • @Tyrone The problem is how do you call timeout callback. You call the method and so timeout uses what function return, here `undefined` (your method return nothing). The easiest one is to wrap it inside anonymous function: `setTimeout( function(){openT( "http://www.websitetest.com/" + this.id )}.bind(this), i * 4000);`. But comes an other issue, in your code you are trying to open a popup but most moder browsers block it automatically if it doesn't follow any user interaction – A. Wolff Dec 06 '16 at 17:32
  • Im using it on only one site where i enabled it so popups are not the problem – Luka Čelebić Dec 06 '16 at 17:34
  • @Tyrone So try it on your site. As a side note, you could use: `setTimeout( openT.bind(this), i * 4000, "http://www.websitetest.com/" + this.id);` – A. Wolff Dec 06 '16 at 17:35
  • 1
    Yes wrapping it worked nicely, and the other way also works, thanks a lot for explaining all this man :) – Luka Čelebić Dec 06 '16 at 18:22