How to define local variables in a jQuery .on function

Question

I have an input HTML element and want to execute a function when there was an input and if this input didn't changed for 3 seconds.

Code:

$("#search_input").on('input', function() {
  input_value = $("#search_input").val();
  if (input_value != "") {
    setTimeout(function() {
      if (input_value == $("#search_input").val()) {
        alert("still the same :) -> go search");
      }
    }, 3000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="search_input" placeholder="Search...">

The problem is that the handler refresh the input_value so it's always the same. How do you set the input_value as a local variable, so it's not refreshed?

Looks like you're just trying to throttle, there are easier ways -> jsfiddle.net/adeneo/o11zpub3 — adeneo
– adeneo, Commented Sep 26, 2016 at 20:30

BrTkCa · Accepted Answer · 2016-09-26 20:25:58Z

5

You forgot the var declaration:

var input_value = $("#search_input").val();

answered Sep 26, 2016 at 20:25

BrTkCa

4,7894 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:19:46Z

0

while the var thing is true, it's unlikely the issue.

Looks like you want something like the link below, with the key difference being that you are setting a timeout and clearing the timeout as the input changes. By definition, the function above is always firing when input is changing so it's redundant.

Run javascript function when user finishes typing instead of on key up?

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Sep 26, 2016 at 20:29

Rob Allen

2,9112 gold badges31 silver badges51 bronze badges

Comments

HeyBill2 · Accepted Answer · 2016-09-26 20:32:11Z

-4

var var_name = value if it's a normal variable. Like a string or number. Do $var_name = jQuery_object if it's a jQuery object.

answered Sep 26, 2016 at 20:32

HeyBill2

12 bronze badges

4 Comments

Jason P Over a year ago

That's just a naming convention... it's not required by the language and can't be the issue here.

HeyBill2 Over a year ago

@JasonP Ik but like you said, its convention

Jason P Over a year ago

This doesn't answer the question, at best it belongs in the comment section.

Jason P Over a year ago

Yes, and your "answer" does not answer the question or solve the problem.

Collectives™ on Stack Overflow

How to define local variables in a jQuery .on function

Code:

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code:

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related