Javascript pass variable value from one function to another

Question

I need to pass the value 7 as a parameter whenever i call check_scroll() function.

But now the lastcount value keeps on increasing even though i call check_scroll() function.

Please keep me some suggestion.

Check the code snippet as like i say,

first click on the first click me to initiate check_scroll function button, then scroll inside the div, you get an alert with value incrementing by 7.

Then click the button and then again scroll, but now the alert wont start from 7.

  $("#mybutton").click(function() {

    check_scroll(7);

  })

  function check_scroll(val) {

    var lastcount = val;
    $('#notification_ul').scroll(function() {
      if ($('#notification_ul').scrollTop() + $('#notification_ul').innerHeight() == $('#notification_ul')[0].scrollHeight) {

            $("#notification_ul").append("<br/> Some Text Append <br/>");
            alert(lastcount);

        lastcount = lastcount + 7;
      }

    })
  }

div {
  width: 200px;
  height: 200px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification_ul">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<button id="mybutton">
  first click me to initiate check_scroll function
</button>

Every time you call `check_scroll()`, you're establishing a **new** scroll handler - the previously-installed handlers will continue to be called. After you have clicked the button 5 times, there will be 5 scroll event handlers called. Each one will start out with `lastcount` at 7, but each scroll event will increment the counter. — Pointy, Jun 29 '16 at 13:41
Sorry, how to fix it. I need to increment from 7 whenever i click the button. — Vignesh Chinnaiyan, Jun 29 '16 at 13:44
Declare the `lastcount = 7` globally outside functions. dosn't pass it in check_scroll and keep incrementing in the function as you are doing right now. — Abdul Rehman, Jun 29 '16 at 13:49
Also use `console.log()` instead of `alert()`; the "scroll" event is fired very aggressively by browsers, and you'll be dealing with thousands of alert boxes. — Pointy, Jun 29 '16 at 13:55
As @Pointy pointed out. Just unbind the scroll event before binding it like `$('#notification_ul').off("scroll").on("scroll", function() {` — a_nain, Jun 29 '16 at 14:00
Possible duplicate of [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — freedomn-m, Jun 29 '16 at 14:11

Hui-Yu Lee · Accepted Answer · 2016-06-30T05:48:24.337

1

define scroll event only once
move lastcount to outside
when the button is clicked, reset lastcount

$(function(){
    var lastcount = 0;

    $("#mybutton").click(function() {
        check_scroll(7);
    });

    $('#notification_ul').scroll(function() {
        if (lastcount !== 0) {
            if ($('#notification_ul').scrollTop() + $('#notification_ul').innerHeight() == $('#notification_ul')[0].scrollHeight) {
                $("#notification_ul").append("<br/> Some Text Append <br/>");
                console.log(lastcount);
                lastcount = lastcount + 7;
            }
        }
    });
});

function check_scroll(val) {
    lastcount = val;
}

edited Jun 30 '16 at 05:48

answered Jun 29 '16 at 14:28

Hui-Yu Lee

909
8
20

1

Thanks @iownthegame, your solution worked, and your explanation also good. – Vignesh Chinnaiyan Jun 30 '16 at 05:29
And 1 more doubt, why this happens actually ? can you explain little bit more – Vignesh Chinnaiyan Jun 30 '16 at 06:24
Actually I don't know what would happen, I also want someone to tell me why. However my knowledge is telling me to bind each event only once. see http://stackoverflow.com/questions/8408826/bind-event-only-once and http://stackoverflow.com/questions/2180326/jquery-event-model-and-preventing-duplicate-handlers – Hui-Yu Lee Jun 30 '16 at 10:48

score 0 · Answer 2 · answered Jun 30 '16 at 05:35

Final Answer after referring your suggestions, Thanks you guys for the fast solution and suggestion. Thumbs Up

var lastcount = 7;
$("#mybutton").click(function() {
 check_scroll(7);
})

$('#notification_ul').scroll(function() 
{
     if ($('#notification_ul').scrollTop() + $('#notification_ul').innerHeight() == $('#notification_ul')[0].scrollHeight) 
     {
  
    $("#notification_ul").append("<br/> Some Text Append <br/>");
    
    alert("last count after scroll " + lastcount);
  
    lastcount = lastcount + 7;
     }

})

function check_scroll(val) {
 lastcount = val;
 alert("Last count reseted to " + lastcount);
}

div {
  width: 200px;
  height: 200px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification_ul">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<button id="mybutton">
  sometext
</button>

Javascript pass variable value from one function to another

2 Answers2