Stop Blink functionality in Javascript

Question

1.00/5 (1 vote)

See more:

Hi Friends,

I want to implement Blink functionality for DIV in javascript.
I succeed the same by using ajax, the code that I used is

C#

function getData_callback(res) {
    var result = res.value;
    if (result == 1) {
        isWtngEnable = true;
        intrvl = setInterval(function blinkDIV() {
            $("#dtWtngTime").css("background-color", function () {
                this.color = !this.color;
                return this.color ? "yellow" : "";
            });
        }, 200)
    }
    else {
        isWtngEnable = false;
        clearInterval(intrvl);
        $("#dtWtngTime").css("background-color", "");
    }
}

Here when result is 1, blinking is working as expected, but when result is not 1 it keeps on blinking. I dont know how to stop setInterval function.

Expected: Once result is not 1, div background color should be empty at once.

But if I refresh the page blinking stops suddenly.

Any tips will be greatly appreciated.

Thanks,
RK

Posted 16-Dec-13 2:50am

♥…ЯҠ…♥

Updated 16-Dec-13 3:32am

v4

Add a Solution

3 solutions

Solution 1

HTML

<div id="hi">Hello</div>

C#

var count = 4,speed=400;
var fIn = function() { $(this).fadeIn(speed, fOut); };
var fOut = function() { if (--count > 0)$(this).fadeOut(speed, fIn); };
$('#hi').fadeOut(speed, fIn);

Posted 16-Dec-13 3:12am

T-Maz

Comments

♥…ЯҠ…♥ 16-Dec-13 9:27am

I want it in Javascript, not in jquery pal

Solution 2

Which browser are you using? This code works fine for me in IE8:

<script type="text/javascript">

    var intrvl;

    function getData_callback(res) {

        var result = res;

        if (result == 1) 
        {
            isWtngEnable = true;

            intrvl = setInterval(function blinkDIV() {
                $("#dtWtngTime").css("background-color", function () {

                    this.color = !this.color;
                    return this.color ? "yellow" : "";
                });
            }, 200)
        }
        else 
        {
            isWtngEnable = false;
            clearInterval(intrvl);
            $("#dtWtngTime").css("background-color", "");
        }
    }

</script>

<body>

    <div class="dtWtngTime" id="dtWtngTime">SOME CONTAINER</div>

    <input type="button" onclick="getData_callback(1);" value="1"/>

    <input type="button" onclick="getData_callback(2);" value="2"/>

</body>

Posted 16-Dec-13 3:27am

Nick Fisher (Consultant)

Updated 16-Dec-13 3:29am

v3

Comments

♥…ЯҠ…♥ 16-Dec-13 9:31am

Really? Am using IE9, am using Ajax function for this, so it automatically calls. I dont have any button to call the funtion :(

Nick Fisher (Consultant) 16-Dec-13 9:40am

OK, well then you really need to check the values that are getting passed through to your function are the values that you're expecting. Put an alert at the start of getData_callback that shows the value being passed through, and this should at least highlight where the error's coming from.

♥…ЯҠ…♥ 16-Dec-13 9:52am

Am not getting any error Nick, I get 1 or 0 only. If I get 1 then blink should start, If I get 0 blink should stop at once.But right now if I get 0 blinking continues not stopping. I want to stop the blinking once the value is 0

Nick Fisher (Consultant) 16-Dec-13 11:34am

Then I'd check the value you have for 'intrvl' is being stored properly. Put an alert showing the value in your setInterval function, and then put another alert just before you perform the clearInterval to make sure the values both match each other. If they're not, then you know that's where the problem is.

♥…ЯҠ…♥ 17-Dec-13 1:20am

Thanks Nick, I have implemented alternate solution.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

♥…ЯҠ…♥ · Accepted Answer · 2013-12-16T19:14:00

Friends,

After spending almost 7 hrs, I found alternate solution for my requirement.
This is the code I have used

C#

function getData_callback(res) {
    var result = res.value;
    if (result == 1) {
        isWtngEnable = true;
        blinkDIVOn();
    }
    else {
        isWtngEnable = false;
        clearTimeout(timer);
        document.getElementById("dtWtngTime").style.background = "";
    }
}

function blinkDIVOn() {
    if (timer) clearTimeout(timer);

    document.getElementById("dtWtngTime").style.background = "Yellow"
    timer = setTimeout("blinkDIVOff()", 500);
}

function blinkDIVOff() {
    if (timer) clearTimeout(timer);

    document.getElementById("dtWtngTime").style.background = "";
    timer = setTimeout("blinkDIVOn()", 500);
}

Now blinking starts and stops perfectly at once.

Thanks friends.

Regards,
RK