js加载时 同时执行多个函数

发布时间 2023-11-26 05:44:00作者: 王庆园

问题:Windows.onload=function();函数不能同时执行导致跳转图片不能同时加载成功

解决方案:根据在CSDN上查到的,采用addloadevent函数执行发现有问题,对于我这个代码来说;

原因大概是我的function function1(){}或者函数2里面有一些问题,因为我原来里面还包括了一个立即执行的匿名函数:详情见function2后半部分注释

这应该是导致没办法立即执行的原因,当时改错的时候打算采用Window.onload=function()然后在这个function中再次调用我下面的其他函数,运行结果显示,

图片可以显示但是不会滚动,烦躁。。。。。。。。

后来差了很多资料,讲到的最多的词语:立即执行函数,然后我就在想,是不是不是立即执行函数就可以全部被调用,因为针对于其他的需要点击的函数虽然有时候也用

匿名函数来写,但是他们的触发条件是点击,而且内部没有其他的函数,或者有也不多,但加载页面时的函数他本身就是个立即执行函数(这里我们用的是这个)然后他里面还

嵌套一个立即执行函数,但是注意:立即执行函数我想肯定是要前提条件,比如登录,或者其他啥触发条件的不可能没有,然后我这里面嵌套的立即执行函数是图片滚动时鼠标悬停或者点击时图片不在滚动,这个函数在function2里面被我注释了(还吐槽了)(罪魁祸首哭哭~~~尖叫~~啊啊啊啊啊~~~~~阴暗爬行扭曲)所以导致window.onload=function执行的时候哎,还得等我悬停不然就不执行,好家伙,我尊度生气了,然后就生气了仨小时,好在最后终于找到了┭┮﹏┭┮我讨厌你┭┮﹏┭┮

(aaaaaaaaaaaaaaaaaaaaaa啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA┭┮﹏┭┮)

 function function1()
    {

    // 获取大盒子的内容 为content的第一个元素 也就是ul中的内容
    var content = document.getElementsByClassName("right1")[0];

    // 获取ul中的li
    var li = content.getElementsByTagName("li");

    // 函数传入两个参数,(i,j)
    function fun(i, j)
    {//转换图片函数,就是把透明度改了一下        
        li[i].style.opacity=1;
        li[j].style.opacity=0;

        // 然后也把小图标的颜色改一下
        // 把图标改成白色
        // 如果图片数量发生改变 那么下面的3也要变成图片的数量
        li[i + 4].style.backgroundColor = "#ffffff";

        // 把图标改成透明
        li[j + 4].style.backgroundColor = "#00000000";
    }

    // 默认情况下轮播图为第一张
    fun(0, 1);//初始化下
    var i = 0;
    function auto()
    {//轮播循环函数
        i ++;
        // 当数组越界的时候
        if(i >= 4)
        {
        // 置为0
            i = 0;
            // 然后递归重新开始
            // 这里的2位3-1的意思
            fun(0, 3);
        }
        else
        {
            // 反之递归
            fun(i, i - 1);
        } 
    }
    // 设置变化的时间
    timer = this.setInterval(auto, 2000);

  
    
  
}

//2
function function2()
{

// 获取大盒子的内容 为content的第一个元素 也就是ul中的内容
var content = document.getElementsByClassName("right2")[0];

// 获取ul中的li
var li = content.getElementsByTagName("li");

// 函数传入两个参数,(i,j)
function fun(i, j)
{//转换图片函数,就是把透明度改了一下        
    li[i].style.opacity=1;
    li[j].style.opacity=0;

    // 然后也把小图标的颜色改一下
    // 把图标改成白色
    // 如果图片数量发生改变 那么下面的3也要变成图片的数量
    li[i + 4].style.backgroundColor = "#ffffff";

    // 把图标改成透明
    li[j + 4].style.backgroundColor = "#00000000";
}

// 默认情况下轮播图为第一张
fun(0, 1);//初始化下
var i = 0;
function auto()
{//轮播循环函数
    i ++;
    // 当数组越界的时候
    if(i >= 4)
    {
    // 置为0
        i = 0;
        // 然后递归重新开始
        // 这里的2位3-1的意思
        fun(0, 3);
    }
    else
    {
        // 反之递归
        fun(i, i - 1);
    } 
}
// 设置变化的时间
timer = this.setInterval(auto, 2000);

// 设置鼠标在轮播图上的时候 轮播图就停止播放
/*//真的服了改来改去原来是有一个立即执行函数在这里面导致不能立即执行成功
//所以把这个立即执行的function删掉,以后看看能不能更改函数名来实现,
我真的改了三个小时苦涩了
content.onmouseover = function () 
{ 
    //鼠标划上去,停止轮播
    clearInterval(timer);
}

// 设置鼠标在轮播图上的时候 轮播图就继续播放
content.onmouseout = function () 
{ 
    //鼠标划出,继续轮播
    timer = setInterval(auto, 2000); //调用定时器
}
var j = 0;
for(; j < 4; j++)
{
    //点击小图标也可以转换图片
    li[j + 4].index = j;
    // 当点击小图标进行的函数
    li[j + 4].onclick = function()
    {
        fun(this.index, i)
        i = this.index;
    }
}*/
}