javascript - 每次 AJAX 调用时使用 JQuery SlideUp、Delay 和 SlideDown

Question

我想向上滑动 header 延迟并向下滑动。我有绑定(bind)到表单提交的功能，但是向上滑动和滑动只在第一次发生。代码如下。

$(document).ready(function() {
  console.log("ready!");


$('form').on('submit', function() {

        setInterval(function() {
            $('header').slideUp(500, function() {
                 $('header').delay(10000).slideDown(500);
                });
            });

        var url = $('input[name="Value"]').val();
        console.log(url)                      
        $.ajax({                                  
                type:'POST',
                url:'/first_page',
                data: {'val': url },
                cache:false,
                success: function(results){
                        console.log(results);

                        $("#heading").html("Word Cloud")
                        $("#key1").html("The primary topic of this page is" + " " +results.pt) 
                        $("#key2").html(" with the relevancy score of" + " " + results.ptr)
                        $("#key3").html("The secondary topic of this page is" + " " + results.st)
                        $("#key4").html(" with the relevancy score of" + " " + results.str)
            },error:function(error){
                   console.log(error)
                 }
});
});

任何人都可以告诉我为什么在我刷新页面时只发生一次吗？谢谢。

Answer 1

由于这是异步，您需要将 slideDown() 方法放在回调中:

$('form').on('submit', function() {
    $('header').slideUp(500);
 
  var url = $('input[name="Value"]').val();
  console.log(url)
  $.ajax({
    type: 'POST',
    url: '/first_page',
    data: {
      'val': url
    },
    cache: false,
    success: function(results) {
      console.log(results);

      $("#heading").html("Word Cloud")
      $("#key1").html("The primary topic of this page is" + " " + results.pt);
      $("#key2").html(" with the relevancy score of" + " " + results.ptr);
      $("#key3").html("The secondary topic of this page is" + " " + results.st);
      $("#key4").html(" with the relevancy score of" + " " + results.str);
      $('header').delay(10000).slideDown(500);
    },
    error: function(error) {
      console.log(error)
    }
  });
  
  return false;
});