CODEWITHSUNDEEP
javascripthtml
Pooja Desai
Pooja Desai

Reputation: 227

How to call javascript function only once during window.onscroll event?

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;

In above code i want to append new div in set of divs having class bucket_left and this divs generated from infinite scrolling. above code is working fine but on scroll it appends so many divs. so how do i append only once ?

Upvotes: 3

Views: 5474

Answers (4)

A J
A J

Reputation: 2140

You only have to set the onscroll property to none as following at the end of you JavaScript function:

window.onscroll = null;

Now when the script executes for the first time, it will perform its function and the above line will set the onscroll to null and thus will not invoke any event on scroll of your mouse and so your function wont be invoked again and again on the event except for the first time.

Or you could handle it logically by setting a public var say var check = 0 and then set the variable to 1 when entered for the first time. So you need to check the value of check and based on that execute the function

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

Upvotes: 1

xlhuang
xlhuang

Reputation: 221

you can try this: when scrolling,the check equal false, and the append event will happen just once; when the scroll end(mouseup or mouseout), the check equal true, you can append again.

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

Upvotes: 0

Ryxle
Ryxle

Reputation: 890

create a global boolean variable and set it to false. again set it to true in the window scroll event and chk the variable is false using a if block. put your code inside that if block.

var isScrolled = false;

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

Upvotes: 1

VisioN
VisioN

Reputation: 145408

Add the following line at the end of your function:

function getH4() {
    // ...

    window.onscroll = null;
}

Upvotes: 6

Related Questions