$ .when($(“")).function()== true).then()无法按预期工作 [英] $.when($("").function() == true).then() not working as expected

问题描述

我有一个返回true或false的函数.现在，一旦函数返回"true"，我想执行一些代码.

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.

该元素在页面加载后1-2秒内显示.但是，由于这也与用户的互联网连接有关，因此我不想使用setTimout函数. 我尝试了几件事，发现它可以在if/else语句中使用，而不能在when/then中使用.有什么想法，这是怎么回事?

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);
});

when/then语句实际上是做什么的: 它会在函数isOnScreen运行后立即运行，但不会等到返回响应为true时再运行.因此，控制台日志始终为false. 然后，我实现了timeOut(仅用于测试目的).运行完timeOut之后，控制台日志始终为false.

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.

它应该做什么: 在结果变为true之后，when/语句应运行.

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

推荐答案

链接到的逻辑旨在用于scroll事件处理程序中.它不会返回承诺，也不应该与承诺一起使用.

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>

这篇关于$ .when($(“")).function()== true).then()无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！