$ .when ($ (""). Function() == true) .then() ne fonctionne pas comme prévu

Question

J'ai une fonction qui retourne true ou false. Maintenant, je voudrais exécuter du code une fois que la fonction retourne "true".

La fonction détermine si un élément est visible à l'écran. Je l'ai pris de here.

L'élément est affiché 1 à 2 secondes après le chargement de la page. Mais comme cela est également lié à la connexion Internet de l'utilisateur, je ne veux pas utiliser une fonction setTimout. J'ai essayé quelques choses et j'ai découvert que cela fonctionne dans une instruction if/else, mais pas dans un quand/alors. Des idées, qu'est-ce qui ne va pas ici?

J'ai testé quelques petites choses, voir ci-dessous le 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); 
}); 

Que quand/then ne fait: Il fonctionne dès que la fonction isOnScreen est en cours d'exécution, mais ne pas attendre le retour la réponse est vraie. Par conséquent, le journal de la console est toujours faux. J'ai ensuite implémenté un timeOut (juste à des fins de test). Une fois que timeOut est passé, le journal de la console est toujours faux. Ce qu'il devrait faire: L'instruction when/the devrait s'exécuter après que le résultat soit devenu vrai.

Answer 1

La logique à laquelle vous avez lié est conçue pour être utilisée dans un gestionnaire d'événements scroll. Il ne renvoie pas de promesse et n'est pas censé être utilisé avec un.

Pour résoudre votre problème, utilisez le plugin comme ceci:

$.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>