Kombinieren von zwei Javascript-Funktionen zu einem window.onload funktioniert nicht

Question

Ich habe zwei Funktionen, die ich auf window.onload-Ereignis ausführen möchte, aber nur die letzte Funktion scheint so weit zu funktionieren. Eine Funktion ist für einen Bildschieberegler und die andere Funktion ruft Daten aus einer Google-Tabellenkalkulationszelle ab.

function fun1() { //image slider 

    var ul; 
    var li_items; 
    var imageNumber; 
    var imageWidth; 
    var prev, next; 
    var currentPostion = 0; 
    var currentImage = 0; 

    function init() { 
    ul = document.getElementById('image_slider'); 
    li_items = ul.children; 
    imageNumber = li_items.length; 
    imageWidth = li_items[0].children[0].clientWidth; 
    ul.style.width = parseInt(imageWidth * imageNumber) + 'px'; 
    prev = document.getElementById("prev"); 
    next = document.getElementById("next"); 

    prev.onclick = function() { 
     onClickPrev(); 
    }; 
    next.onclick = function() { 
     onClickNext(); 
    }; 
    } 

    function animate(opts) { 
    var start = new Date; 
    var id = setInterval(function() { 
     var timePassed = new Date - start; 
     var progress = timePassed/opts.duration; 
     if (progress > 1) { 
     progress = 1; 
     } 
     var delta = opts.delta(progress); 
     opts.step(delta); 
     if (progress == 1) { 
     clearInterval(id); 
     opts.callback(); 
     } 
    }, opts.delay || 17); 

    } 

    function slideTo(imageToGo) { 
    var direction; 
    var numOfImageToGo = Math.abs(imageToGo - currentImage); 


    direction = currentImage > imageToGo ? 1 : -1; 
    currentPostion = -1 * currentImage * imageWidth; 
    var opts = { 
     duration: 1000, 
     delta: function(p) { 
     return p; 
     }, 
     step: function(delta) { 
     ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px'; 
     }, 
     callback: function() { 
     currentImage = imageToGo; 
     } 
    }; 
    animate(opts); 
    } 

    function onClickPrev() { 
    if (currentImage == 0) { 
     slideTo(imageNumber - 1); 
    } else { 
     slideTo(currentImage - 1); 
    } 
    } 

    function onClickNext() { 
    if (currentImage == imageNumber - 1) { 
     slideTo(0); 
    } else { 
     slideTo(currentImage + 1); 
    } 
    } 

} 

function fun2() { 
    // Google spreadsheet js 

    google.load('visualization', '1', { 
    callback: function() { 

     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1sA7M5kG6Xo8YScD1Df38PIA_G0bvhGRdqoExXg0KJTs/gviz/tq?tqx=out:html&tq?gid=0&headers=0&range=A1:C'); 
     query.send(displayData); 
    } 
    }); 

    function displayData(response) { 

    numRows = response.getDataTable().getValue(0, 0); 

    document.getElementById('data').innerHTML = numRows; 
    } 
} 


var addFunctionOnWindowLoad = function(callback) { 
    if (window.addEventListener) { 
    window.addEventListener('load', callback, false); 
    } else { 
    window.attachEvent('onload', callback); 
    } 
} 

addFunctionOnWindowLoad(fun1); 
addFunctionOnWindowLoad(fun2); 

Dies ist die Antwort, die ich link habe versucht, aber ich kann nicht scheinen, um herauszufinden, wo ich falsch gehe.

Answer 1

Ich habe diese Funktion vor einer Weile gefunden und glaube es oder nicht, ich muss es immer noch benutzen. addEventLoad() Rufen Sie einfach addEventLoad, während Sie die Funktion zum Laden übergeben.

"The way this works is relatively simple: if window.onload has not already been assigned a function, the function passed to addLoadEvent is simply assigned to window.onload. If window.onload has already been set, a brand new function is created which first calls the original onload handler, then calls the new handler afterwards."

wird Dieser Code-Schnipsel auf 3 Funktionen laden window.onload

Snippet

function addLoadEvent(func) { 
 
    var oldonload = window.onload; 
 
    if (typeof window.onload != 'function') { 
 
    window.onload = func; 
 
    } else { 
 
    window.onload = function() { 
 
     if (oldonload) { 
 
     oldonload(); 
 
     } 
 
     func(); 
 
    } 
 
    } 
 
} 
 

 

 
function alert1() { 
 
    alert("First Function Loaded"); 
 
} 
 

 
function alert2() { 
 
    alert("Second Function Loaded"); 
 
} 
 

 
function alert3(str) { 
 
    alert("Third Function Loaded; Msg: " + str); 
 
} 
 
addLoadEvent(alert1); 
 
addLoadEvent(alert2); 
 
addLoadEvent(function() { 
 
    alert3("This works"); 
 
});

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 2

Dies ist, was ich tun beendet, und jetzt alle Arbeitsfunktionen.

var ul; 
var li_items; 
var imageNumber; 
var imageWidth; 
var prev, next; 
var currentPostion = 0; 
var currentImage = 0; 


function init() { 
    ul = document.getElementById('image_slider'); 
    li_items = ul.children; 
    imageNumber = li_items.length; 
    imageWidth = li_items[0].children[0].clientWidth; 
    ul.style.width = parseInt(imageWidth * imageNumber) + 'px'; 
    prev = document.getElementById("prev"); 
    next = document.getElementById("next"); 
     prev.onclick = function() { 
     onClickPrev(); 
    }; 
    next.onclick = function() { 
     onClickNext(); 
    }; 
} 

function animate(opts) { 
    var start = (new Date()); 
    var id = setInterval(function() { 
     var timePassed = (new Date()) - start; 
     var progress = timePassed/opts.duration; 
     if (progress > 1) { 
      progress = 1; 
     } 
     var delta = opts.delta(progress); 
     opts.step(delta); 
     if (progress == 1) { 
      clearInterval(id); 
      opts.callback(); 
     } 
    }, opts.delay || 17); 
    //return id; 
} 

function slideTo(imageToGo) { 
    var direction; 
    var numOfImageToGo = Math.abs(imageToGo - currentImage); 
    // slide toward left 

    direction = currentImage > imageToGo ? 1 : -1; 
    currentPostion = -1 * currentImage * imageWidth; 
    var opts = { 
     duration: 1000, 
     delta: function(p) { 
      return p; 
     }, 
     step: function(delta) { 
      ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px'; 
     }, 
     callback: function() { 
      currentImage = imageToGo; 
     } 
    }; 
    animate(opts); 
} 

function onClickPrev() { 
    if (currentImage === 0) { 
     slideTo(imageNumber - 1); 
    } else { 
     slideTo(currentImage - 1); 
    } 
} 

function onClickNext() { 
    if (currentImage == imageNumber - 1) { 
     slideTo(0); 
    } else { 
     slideTo(currentImage + 1); 
    } 
} 

window.onload = init; 


function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
     window.onload = func; 
    } else { 
     window.onload = function() { 
      if (oldonload) { 
       oldonload(); 
      } 
      func(); 
     } 
    } 
} 

function fun2() { 
    // Google spreadsheet js 

    google.load('visualization', '1', { 
     callback: function() { 

      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1sA7M5kG6Xo8YScD1Df38PIA_G0bvhGRdqoExXg0KJTs/gviz/tq?tqx=out:html&tq?gid=0&headers=0&range=A1:C'); 
      query.send(displayData); 
     } 
    }); 

    function displayData(response) { 

     numRows = response.getDataTable().getValue(0, 0); 

     document.getElementById('data').innerHTML = numRows; 
    } 


} 
addLoadEvent(fun2); 
addLoadEvent(function() { 
});