如何連續運行多次函數？

Question

我想要做的就是製作一個眨眼的盒子。換句話說，我想調用一個函數。我有這樣的功能：

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("#div1").fadeToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click to fade in/out box</button><br /><br /><br /> 
 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

當用戶點擊按鈕，我想，那個盒子淡入/淡出若干時間連續只要請求（阿賈克斯）所花費的時間。目前當用戶點擊該按鈕時，該框會淡入/出一次。現在我想開始淡入/淡出，直到請求結束。我怎樣才能做到這一點？

其實我試圖讓一個在請求發送時閃爍框。

Answer 1

$(document).ready(function(){ 
 
    function toggleForever() { 
 
    $("#div1").fadeToggle("slow", toggleForever); 
 
    } 
 
    
 
    $("button#start").click(function() { 
 
    toggleForever(); 
 
    }); 
 
    
 
    $("button#stop").click(function() { 
 
    $("#div1").stop().animate({opacity:1}, "slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="start">Click to fade in/out box</button> 
 
<button id="stop">Click to stop</button><br /><br /><br /> 
 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

當動畫完成時，將調用fadeToggle的函數參數。在另一個按鈕上單擊，我們stop動畫和淡入框中（所以當我們完成後總是可見的，無論我們的動畫在哪裏）。在你的真實代碼中，當你的AJAX調用完成時你會這樣做。

UPDATE

另一種方法，使用CSS動畫代替。這裏有一個顯着的區別是停止動畫突然回到完全不透明狀態。

$(function() { 
 
    $('#start').click(function() { 
 
    $('#div1').addClass('blinking'); 
 
    }); 
 
    
 
    $('#stop').click(function() { 
 
    $('#div1').removeClass('blinking'); 
 
    }); 
 
});

.blinking { 
 
    animation: blinker 600ms linear infinite alternate; 
 
} 
 

 
@keyframes blinker { to { opacity: 0; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="start">Click to fade in/out box</button> 
 
<button id="stop">Click to stop</button><br /><br /><br /> 
 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

Answer 2

在jQuery中有一些全局ajax事件。

您可以偵聽ajaxStart，ajaxComplete像：

$(function() { 
     $(document).ajaxStart(function() { 
      // Start your animation 
     }); 
     $(document).ajaxComplete(function() { 
      // End your animation 
     }); 
    }); 

我的片段：

// utility function to wait (simulate ajax) 
 
$.wait = function(ms) { 
 
    var defer = $.Deferred(); 
 
    setTimeout(function() { defer.resolve(); }, ms); 
 
    return defer; 
 
}; 
 

 

 
var isAjaxEnded = true; 
 

 
$(function() { 
 
    $("#div1").click(function(){ 
 
    $(this).fadeToggle("slow", function() { 
 
     if (!isAjaxEnded) 
 
     $("#div1").trigger('click'); 
 
    }); 
 
    }); 
 

 
    $(document).ajaxStart(function() { 
 
    isAjaxEnded = false; 
 
    $("#div1").trigger('click'); 
 
    }); 
 
    
 
    $(document).ajaxComplete(function() { 
 
    // the next line is commented because I'm simulating... 
 
    //isAjaxEnded = true; 
 
    // End your animation 
 
    }); 
 
    
 
    
 
    $.getJSON('https://api.github.com/users').done(function(data) { 
 
    // just wait only 3 seconds 
 
    $.wait(3000).then(function() { 
 
     isAjaxEnded = true; 
 
    }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

Answer 3

您可以使用setInterval的連續運行的開關週期，並與ClearInterval結束。

var _timer1; 
var _timer2; 

$(document).ready(function(){ 

    $("#BtnStart").click(function(){ 
     _timer1 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 500);  
     _timer2 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 1000); 
    });  

    //Call stop stop annimation 
    $("#BtnStop").click(function(){ 
     clearInterval(_timer1); 
     clearInterval(_timer2); 
    });  

});