在 JS 中，如果通过卸载调用两个函数，浏览器以什么顺序处理它们

In JS, If two function are called by unload in what order are they processed by the browser

本文关键字：函数两个浏览器顺序处理以什么如果 JS 调用卸载更新时间：2023-09-26

我试图在函数resizeimg()之后调用newsize(picture_src)。似乎总是首先调用函数newsize(picture_src)。

必须先调用该函数resizeimg()，因为它设置了newsize(picture_src)用于更改图像src的sizepic()函数。

这是我的 html：

<html>
<head>
    <meta charset="UTF-8" />
    <title>TP n°1 - Mise en place d'une grille responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="css/reset.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <script>
            if(window.innerWidth>1200){
                var sizepic='1200';
            }
            else if(window.innerWidth<1200 && window.innerWidth>900){
                var sizepic='990';
            }
            else if(window.innerWidth<990 && window.innerWidth>768){
                var sizepic='768';
            }
            else if(window.innerWidth<768 && window.innerWidth>590){
                var sizepic='590';
            }
            else if(window.innerWidth<590){
                var sizepic='petit';
            }
    function newsize(picture_src, picture){
                picture_src.src=='img/'+sizepic+'/'+picture+sizepic+'.jpg';
                alert(picture_src.src);
    }
    </script>
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div class="wrapper">
        <!-- 1ère ligne -->
        <div class="row">
            <div class="col100">
                 <div class="row">
                    <div class="col60 cs100">
                        <div id='september'class="xs-contenu">
                            <h1>Experience the web</h1>
                            <p><strong>September 2013 Club Theme</strong></p>
                        </div>
                    </div>
                    <div class="col40 cs100">
                        <div class="xs-contenu">
                            <div id='dv-icon'>
                                <img src='img/1200/iconchat.jpg'>
                                <img src='img/1200/icontwitter.jpg'>
                                <img src='img/1200/iconbasket.jpg'>
                                <img src='img/1200/iconfacebook.jpg'>
                            </div>
                        </div>
                    </div>
               </div>
            </div>
        </div>
        <!-- 2nde ligne -->

        <!-- 3ème ligne -->
        <div class="row">
            <div class='col20 cs50'>
                <div class="row">
                    <div class="col100">
                        <div class="contenu">
                            <p class='square'>Design and styled with Ulkit.</p>
                        </div>
                    </div>
                    <div class="col100">
                        <div class="contenu">
                            <img onload='newsize(this, 'cube')'src=""/>
                        </div>
                    </div>
                </div>
            </div>

sizepic出现在resizeimg的本地; picture_src 不会设置img元素的src。

试试这个：

在调用 resizeimg() 的外部和之前定义sizepic。
从调用 resizeimg() 的body中删除 onload 事件。
将this传递到newsize()（将picture_src设置为 this ）。确保在函数期间将onload事件设置为null，以防止在设置picture_src src后递归调用newsize。

<body>
  <script>
    // declare variable `sizepic`
    var sizepic;
    function resizeimg() {
      if (window.innerWidth > 1200) {
        sizepic = '1200';
        alert(sizepic);
      } else if (window.innerWidth < 1200 && window.innerWidth > 900) {
        sizepic = '990';
      } else if (window.innerWidth < 990 && window.innerWidth > 768) {
        sizepic = '768';
      } else if (window.innerWidth < 768 && window.innerWidth > 590) {
        sizepic = '590';
      } else if (window.innerWidth < 590) {
        sizepic = 'petit';
      }
      console.log("resizeimg called")
    };
    // call `resizeimg` here
    resizeimg();
    function newsize(picture_src) {          
      picture_src.src ="http://lorempixel.com/" + sizepic + "/" + sizepic;
      console.log("newsize called", picture_src, event);
      // remove `onload` event from `picture_src`
      picture_src.onload = null;
      }
  </script>
  <img onload="newsize(this)" src="http://lorempixel.com/1/1/" />
</body>