如何在window.onscroll事件期間只調用一次javascript函數？

Question

function getH4() {
    var xyz = document.getElementsByClassName('bucket_left');
    for(var i=0;i<xyz.length;i++){
        var x=document.getElementsByTagName("h4")[i].innerHTML;
        var current_bucket = xyz[i];
        var y=current_bucket.firstChild.href;
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<a href=\""+y+"\">"+x+"</a>";
        newdiv.className = "hover_title_h4";
        current_bucket.appendChild(newdiv);
    }
}

window.onscroll=getH4;

在上面的代碼中，我想在具有類bucket_left的div的集合中追加新的div ，並且這個div由無限滾動生成。 上面的代碼工作正常，但在滾動它附加了這么多div 。 那么我怎么只追加一次呢？

Answer 1

在函數末尾添加以下行：

function getH4() {
    // ...

    window.onscroll = null;
}

Answer 2

創建一個全局布爾變量並將其設置為false。 再次在窗口滾動事件中將其設置為true，並使用if塊將變量設置為false。 把你的代碼放在if塊中。

var isScrolled = false;

function getH4() {
    if(!isScrolled){
        //your code
    }
    isScrolled = true
}

Answer 3

您只需將onscroll屬性設置為none，如JavaScript函數末尾所示：

window.onscroll = null;

現在當腳本第一次執行時，它將執行其功能，上面的行將onscroll設置為null，因此不會在滾動鼠標時調用任何事件，因此不會在事件上一次又一次地調用您的函數除了第一次。

或者您可以通過設置public var say var check = 0來邏輯處理它，然后在第一次輸入時將變量設置為1。 所以，你需要檢查的值check ，並基於該執行的函數

var check = 1;
function getH4() {
    if(check==1)
    {
    var xyz = document.getElementsByClassName('bucket_left');
    for(var i=0;i<xyz.length;i++){
        var x=document.getElementsByTagName("h4")[i].innerHTML;
        var current_bucket = xyz[i];
        var y=current_bucket.firstChild.href;
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<a href=\""+y+"\">"+x+"</a>";
        newdiv.className = "hover_title_h4";
        current_bucket.appendChild(newdiv);
     }
        check=0;
    }
}

Answer 4

您可以嘗試這樣做：滾動時，檢查等於false，並且附加事件只發生一次; 當滾動結束（mouseup或mouseout），檢查等於true時，您可以再次追加。

var check = true;
function getH4(event) {
    event.target.onmouseup = function() {
        check = true;
    }
    event.target.onmouseout = function() {
        check = true;
    }
    if (check) {
        var xyz = document.getElementsByClassName('bucket_left');
        for(var i=0;i<xyz.length;i++){
            var x=document.getElementsByTagName("h4")[i].innerHTML;
            var current_bucket = xyz[i];
            var y=current_bucket.firstChild.href;
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "<a href=\""+y+"\">"+x+"</a>";
            newdiv.className = "hover_title_h4";
            current_bucket.appendChild(newdiv);
        }
    check = false;
}

window.onscroll=getH4