0

Just quick question, is there a way to call a function and modify a variable at the same time? Take this,<button onclick="change(); var con = true">click me</button>

<script>
function change() {
while (con == true) {
var x = event.clientX;
var y = event.clientY;
}
//do some more magical stuff
}
</script>

Basically I want to loop the while loop only if the condition is true, and do some more magical stuff at the same time, would that be possible?

5
  • 2
    Your current function will lock up the browser, are you sure you actually want this kind of loop? Commented Apr 21, 2016 at 6:52
  • Where in your code does con === false? Like Paul said, this is currently an infinite loop. Commented Apr 21, 2016 at 6:54
  • There is an event that I haven't mentioned, onmouseup="var con = false", that works fine I just want it to loop while the condition is true Commented Apr 21, 2016 at 6:57
  • probably, you want to use an if block instead of while? Commented Apr 21, 2016 at 8:25
  • What's that (the if block instead of while) Commented Apr 21, 2016 at 12:02

3 Answers 3

2

Try this

<button onclick="window.con = true; change();">click me</button>
<script>
    window.con = false;
    function change() {
        while (window.con == true) {
            var x = event.clientX;
            var y = event.clientY;

            // Put some logic here to break the loop.
        }
       //do some more magical stuff
     }
</script>
Sign up to request clarification or add additional context in comments.

1 Comment

Thank-you for your support.
0

Using while or for as shown in your example code will lock up the client's browser when invoked. Consider instead using a callback-y way, e.g. with setTimeout

Example using setTimeout wrapping a function, returning a toggle function

function toggleableFn(fn, rate) {
    let timeout,
        run = false,
        loop;
    function looper(args) {
        if (!run) return; // double safety
        fn.apply(this, args);
        timeout = window.setTimeout(loop, rate);
    }
    return (...args) => {
        run = !run;
        if (run) {
            loop = looper.bind(this, args);
            loop();
            return true
        }
        else {
            window.clearTimeout(timeout);
        }
        return false;
    };
}

var rep = toggleableFn((x, y) => console.log(x, y), 1e3);
rep('foo', 'bar'); // true
// logs "foo" "bar" every second until you toggle with `rep(); // false`

1 Comment

WOW! Thank-you, that is amazing
-1

I would not recommend that approach. Not that it is not ok, but for the sake of having all code in the right places I would definitelly put all code in functions.

and - no offense - this coding practisies are a bit "old school", try to learn for example jQuery, and all the stuff will be hopefully much clearer then

3 Comments

jQuery doesn't solve all JS problems. For what you're talking about a simple addEventListener would do the trick. Isn't jQuery itself a bit old-school - it's older than 5 JS years which is like 120 in human years.
:) no, I am not talking about jQuery it self, but about coding approaches that for example jQuery uses. And because jQuery is maybe the most known and on web documented option, I chose to recommend it. And getting used to those approaches the OP can move further to any options and possibilities they're there....
"Not that it is not ok" - Actually it is not OK because it doesn't work: the OP's approach creates an infinite loop because Javascript is single-threaded so the loop condition can't be changed by another event handler while the loop is running.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.