İki Javascript işlevini bir pencereye birleştirir. Çalışmıyor

Question

window.onload olayında çalıştırmak istediğim iki işlevi var, ancak yalnızca son işlev şu ana kadar çalışıyor gibi görünüyor. Bir işlev bir görüntü kaydırıcısıdır, diğeri ise bir google e-tablo hücresinden veri alır.

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); 

Bu

ben link denedim cevabı ancak yanlış nereye gidiyorum anlamaya gibi olamaz.

Answer 1

Bu işlevi bir süre önce buldum ve inanın ya da inanmayın, yine de sık sık kullanmam gerek. addEventLoad() Yüklenecek işlevi aktarırken yalnızca addEventLoad numaralı telefonu arayın.

"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."

Bu pasajı

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

Bu benim artık tüm fonksiyonları işi bitti ve ne Snippet'ine

window.onload

3 işlevlerini yükleyecektir.

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() { 
});