正常的执行带码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function的执行顺序问题解决方案</title> <script src="jquery-3.3.1.min.js"></script> <style> body { margin: 0; padding: 0; } #demo1, #demo2, #demo3, #demo4 { float: left; width: 100%; height: 30px; background-color: #00A5BB; margin: 1px auto; color: #fff; } </style> </head> <body> <div id="demo1"></div> <div id="demo2"></div> <div id="demo3"></div> <div id="demo4"></div> <script> $(function () { getDemo1(); getDemo2(); getDemo3(); getDemo4(); function getDemo1() { $('#demo1').html('demo1'); } function getDemo2() { $('#demo2').html('demo2'); } function getDemo3() { $('#demo3').html('demo3'); } function getDemo4() { $('#demo4').html('demo4'); } }) </script> </body> </html>
一、当其中的一个函数被注释掉或则删除的时候,调用对应的getDemo2();也必须注释掉或则删除,否则将影响后面的getDemo3()和getDemo4()的正常执行
/* function getDemo2() { $('#demo2').html('demo2'); }*/
二、HTML中对应的div可以任意删除或注释,不受影响;
<div id="demo1"></div> <div id="demo2"></div> <div id="demo3"></div> <div id="demo4"></div>
三、调用的函数,也可以任意删除或注释,不受影响;
getDemo1(); getDemo2(); getDemo3(); getDemo4();