$.when($(“”).function() == true).then() not workin

Question

I have a function which returns true or false. Now I'd like to execute some code once the function returns "true".

The function determines if an element is visible on screen. I took it from here.

The element is displayed 1-2 seconds after the page is loaded. But as this is also related to the internet connection of the user, I don't want to use a setTimout function. I tried a few things and found out, that it works in an if/else statement, but not in a when/then. Any ideas, what is going wrong here?

I tested a few things, see below the code

//below if else statement works fine and logs the correct result
    if($(".myClass").isOnScreen()==true){
        console.log("true");
    }
    else{console.log("false");}

//however i would like to use this one and it doesn't seem to work
$.when($(".myClass").isOnScreen()==true).then(function(){
    console.log($(".myClass").isOnScreen());
    setTimeout(function(){
        console.log($(".myClass").isOnScreen());
    },1000);
});

What the when / then statement actually does: It runs as soon as the function isOnScreen is running, but doesn't wait until the return response is true. Therefore the console log is always false. I then implemented a timeOut (just for testing purposes). After the timeOut ran through, the console log is always false.

What it should do: The when / the statement should run after the result turns to true.

Answer 1

The logic you linked to is designed to be used within a scroll event handler. It doesn't return a promise and isn't supposed to be used with one.

To solve your issue, use the plugin like this:

$.fn.isOnScreen = function() {
  var element = this.get(0);
  var bounds = element.getBoundingClientRect();
  return bounds.top < window.innerHeight && bounds.bottom > 0;
}
var $output = $('.output'), $foo = $('.foo');

// the important part:
$(window).on('scroll', function() {
  $output.text('visible: ' + $foo.isOnScreen());
});

.box {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: #CCC;
}

.foo {
  background-color: #C00;
}

.output {
  position: fixed;
  top: 50px;
  right: 50px;
}

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

<div class="output"></div>