首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery:让第二个函数等待执行,直到第一个函数完成

jQuery:让第二个函数等待执行,直到第一个函数完成
EN

Stack Overflow用户
提问于 2018-09-12 06:23:27
回答 1查看 1K关注 0票数 0

我尝试使用whendone使第二个函数仅在第一个函数执行后才运行,但它不起作用。我在这里想要实现的是:

首先,我使用$("#jobshome").load("jobs/newest-jobs .js-toprow");从外部页面加载一个div (在相同的域中,这里没有跨域),然后在它完全加载后,将运行下一个脚本,它是一个简单的文本滑块。但是现在外部HTML不再加载到"#jobshome“中了。

当我不使用这种方法时,我得到的结果是整个外部div将在一个滑块中加载,而这不是我需要的。

如果我像这样使用初始部分,它可以工作,但不是预期的那样:

代码语言:javascript
复制
$(function(){$("#jobshome").load("jobs/newest-jobs .js-toprow");});
        $(function(){

    //rotation speed and timer

我的代码如下:

代码语言:javascript
复制
jQuery(document).ready(function($) {

  $.when(function() {
    $("#jobshome").load("jobs/newest-jobs .js-toprow");
  }).done(function() {

    //rotation speed and timer
    var speed = 3000;
    var run = setInterval(rotate, speed);
    var slides = $('.js-toprow');
    var container = $('#jobshome');
    var elm = container.find(':first-child').prop("tagName");
    var item_height = container.height();
    var previous = 'prevabc'; //id of previous button
    var next = 'nextabc'; //id of next button
    slides.height(item_height); //set the slides to the correct pixel height
    container.parent().height(item_height);
    container.height(slides.length * item_height); //set the slides container to the correct total height
    container.find(elm + ':first').before(container.find(elm + ':last'));
    resetSlides();


    //if user clicked on prev button

    $('#buttonsabc a').click(function(e) {
      //slide the item

      if (container.is(':animated')) {
        return false;
      }
      if (e.target.id == previous) {
        container.stop().animate({
          'top': 0
        }, 1500, function() {
          container.find(elm + ':first').before(container.find(elm + ':last'));
          resetSlides();
        });
      }

      if (e.target.id == next) {
        container.stop().animate({
          'top': item_height * -2
        }, 1500, function() {
          container.find(elm + ':last').after(container.find(elm + ':first'));
          resetSlides();
        });
      }
      //cancel the link behavior            
      return false;

    });

    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function() {
      clearInterval(run);
    }).mouseleave(function() {
      run = setInterval(rotate, speed);
    });


    function resetSlides() {
      //and adjust the container so current is in the frame
      container.css({
        'top': -1 * item_height
      });
    }

  });
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin

function rotate() {
  jQuery('#nextabc').click();
}
代码语言:javascript
复制
#carouselabc {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

#slidesabc {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 250px;
}

#areadoslideabc {
  list-style: none;
  width: 100%;
  height: 250px;
  margin: 0;
  padding: 0;
  position: relative;
}

#slidesabcdef {
  width: 100%;
  height: 250px;
  float: left;
  text-align: center;
  position: relative;
  font-family: lato, sans-serif;
}


/* Styling for prev and next buttons */

.btn-barabc {
  max-width: 346px;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 40px;
  width: 100%;
}

#buttonsabc {
  padding: 0 0 5px 0;
  float: right;
}

#buttonsabc a {
  text-align: center;
  display: block;
  font-size: 50px;
  float: left;
  outline: 0;
  margin: 0 60px;
  color: #b14943;
  text-decoration: none;
  display: block;
  padding: 9px;
  width: 35px;
}

a#prevabc:hover,
a#next:hover {
  color: #FFF;
  text-shadow: .5px 0px #b14943;
}
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carouselabc">
  <div class="btn-barabc">
    <div id="buttonsabc">
      <a id="prevabc" href="#">Previous</a>
      <a id="nextabc" href="#">Next</a>
    </div>
  </div>
  <div id="slidesabc">
    <div id="jobshome"></div>
  </div>
</div>

脚本来源:https://codepen.io/TyStelmach/pen/yygvNK

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-12 07:30:38

为什么不使用load()函数的回调?

代码语言:javascript
复制
$("#jobshome").load("jobs/newest-jobs .js-toprow", () => {
   //do stuff after loading the html
}); 

when无法工作,因为它需要一个PromiseDeferred对象,如果两者都不是,它会将传递的值视为已解析的Deferred (这基本上意味着它不会等待,而是立即执行then/done )。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52284950

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档