JS - 如何在函數結束時執行某些操作

Question

這是一個應該打開和關閉我的網站菜單的代碼。菜單被劃分爲div，並且每個都被定時以在另一個之後進入屏幕。

<script type="text/javascript"> 
     var s=0; 
      function menuOpen() { 
       if (s==0){ 
        document.getElementById("menu_icon").src = "x.png"; 
        document.getElementById("nav_menu").style.zIndex = "3"; 
        $('.box-wrapper').each(function(index, element) { 
        setTimeout(function(){ 
         element.classList.remove('loading'); 
        }, index * 100); 
       }); 
       s++; 
       } else { 
        document.getElementById("menu_icon").src = "menu_icon.png"; 
        $('.box-wrapper').each(function(index, element) { 
        setTimeout(function(){ 
         element.classList.add('loading'); 
        }, index * 100); 

       }); 
        s=0; 
        // how to make this part run after the menu has finished folding? 
        setTimeout(function(){ 
         document.getElementById("nav_menu").style.zIndex = "1"; 
        }, 1500); 

       } 

      } 


    </script> 

在網頁的內容是在z軸折射率2.摺疊時的菜單爲1，並且當在打開3.

有一種方法來運行命令移動所述菜單Z-菜單完成摺疊後的索引1？

目前我所做的就是動畫（1600ms）並使用setTimeout。但是，如果我將更多行添加到我的菜單中，或者有人快速點擊菜單圖標，這個時間將會改變。

我是相當新的JS和jQuery這樣下去容易對我（：。

感謝您的幫助

Answer 1

和CSS過渡。

var s=0; 
       function menuOpen() { 
        if (s==0){ 
         document.getElementById("menu_icon").src = "x.png"; 
         document.getElementById("nav_menu").style.zIndex = "3"; 
         $('.box-wrapper').each(function(index, element) { 
         setTimeout(function(){ 
          element.classList.remove('loading'); 
         }, index * 100); 
        }); 
        s++; 

         $("#last").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
        document.getElementById("nav_menu").style.zIndex = "3"; 
          }); 

        } else { 
         document.getElementById("menu_icon").src = "menu_icon.png"; 
         $('.box-wrapper').each(function(index, element) { 
         setTimeout(function(){ 
          element.classList.add('loading'); 
         }, index * 100); 

        }); 
         s=0; 
        $("#last").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
        document.getElementById("nav_menu").style.zIndex = "1"; 
        $("#nav_menu").scrollTop(0); 

        }); 

        } 

       } 

Answer 2

下面你可以找到的代碼，並鏈接到的jsfiddle偏偏的jsfiddle塊的動畫的方法因爲不明原因，所以我不調試，但即使它的代碼將無法正常工作:)））我希望你會主張這個想法。還有一些解釋。

首先我們的項目被隱藏。有兩個函數displayMenu和hideMenu，它們是相似的，但顯示 - 從頂部隱藏動畫，隱藏 - 從底部可見隱藏項目。爲了防止混亂，我使用兩個標誌和兩個類，第一個openFlag這是說現在應該播放什麼動畫。我們的隱藏和顯示功能是遞歸的，當他們結束當前動畫（隱藏或顯示）後，他們檢查openFlag，並播放下一個隱藏/顯示或啓動另一鏈接的隱藏/顯示功能。這是最難理解的部分）但重要的是，你可以點擊任意多次，只要你願意，一切都會很好，並且不會被點擊打斷。

我們用作動畫鏈的兩個類可以改變行爲，我們需要選擇可見或隱藏的項目的方法，所以爲什麼在每個動畫之後我們只設置其中一個類並刪除另一個。

現在有一個問題，如果所有的動畫結束，當我們點擊按鈕時，我們應該開始新的動畫鏈，但是如果鏈已經開始，我們只需要切換openFlag，當前動畫停止時，它會改變行爲。所以這是btnFlag的原因，如果此時沒有活動的連鎖動畫，則爲1。

在動畫鏈元素的最後一次執行後，它會調用回調參數，您應該通過，此時也會將btnFlag設置爲0，這意味着動畫鏈停止。你還記得在點擊時改變的openFlag。

function end() { 
    console.log("here you can set zIndex"); 
} 

var openFlag = 0; //become 1 after we start open elems 
var btnFlag = 1; 

$(document).ready(function() { 
    $('.toggleMenu').click(function() { 
    if (!$('.menuBlocks').hasClass('visible')) { 
     if (openFlag == 0) { 
     openFlag = 1; 
     if (btnFlag) { 
      var items = $('.invisibleItem'); 
      var amount = items.length; 
      displayMenu(0, amount, items, end); 
     } 
     } 
    } else { 
     openFlag = 0; 
     if (btnFlag) { 
     var items = $('.visibleItem'); 
     var amount = items.length; 
     hideMenu(amount - 1, items, end); 
     } 
    } 
    }); 
}); 

function displayMenu(i, amount, items, callback) { 
    if (i < amount && openFlag) { 
    items[i].animate({ 
     "width": "100px" 
    }, 1000, function() { 
     items[i].removeClass('invisibleItem'); 
     items[i].addClass('visibleItem'); 
     displayMenu(i + 1, amount, items); 
    }); 
    } else if (!openFlag) { 
       var items = $('.visibleItem'); 
     var amount = items.length; 
     hideMenu(amount - 1, items, makeToggleVisible); 
    } else { 
    btnFlag = 1; //all aniimations ended 
    callback(); 
    } 
} 

function hideMenu(i, items, callback) { 
    if (i < 0 && openFlag) { 
    items[i].animate({ 
     "width": "0px" 
    }, 1000, function() { 
     items[i].removeClass('visibleItem'); 
     items[i].addClass('invisibleItem'); 
     hideMenu(i - 1, amount, items); 
    }); 
    } else if (!openFlag) { 
     var items = $('.invisibleItem'); 
    var amount = items.length; 
    displayMenu(0, amount, items, makeToggleVisible); 
    } else { 
    btnFlag = 1; //all animations are ended 
    callback(); 
    } 
} 

https://jsfiddle.net/ShinShil/nrtyshv5/4/

Answer 3

好固定它。 我把所有東西都移到了jquery中。使用動畫和承諾。 這是最後出來的。這是一個側面菜單，將逐一打開它的李元素。

 var s=0; 
     var navMenu = document.getElementById("nav_menu"); 
     var navBtn = document.getElementById("btn"); 

     $(document).ready(function(){ 
      $("button").click(function(){ 
       if (s==0) { 
       navMenu.style.zIndex = "4"; 

       navBtn.classList.add('close'); 

       $('ul').each(function() { 
        $(this).children().each(function(i) { 
        $(this).delay(i * 100).animate({left:0}); 
        }); 
       }); 
        $("li").promise().done(function() { 
        navMenu.style.zIndex = "4"; 
        }); 
        s++; 
        } 

       else { 
       navBtn.classList.remove('close'); 
       $('ul').each(function() { 
        $(this).children().each(function(i) { 
        $(this).delay(i * 100).animate({left:"100%"}); 
        }); 

       }); 
        s=0; 

        $("li").promise().done(function() { 
        navMenu.style.zIndex = "1"; 
        }); 

        } 

       }); 
      });