Script causing DevTools to crash

Question

I'm trying to write a chatbot for entertainment, and one of its primary functions is meme lookup. I first wrote this in Python, but I'm now rewriting it in JavaScript, as it can then run totally client side.

Here is my JavaScript meme() function:

function meme(srch) {
  reqUrl = "http://api.pixplorer.co.uk/image?amount=1&size=tb&word=meme";
  memesrch = "";
  while (srch) {
    memesrch += "+" + srch[0];
    srch.slice(1);
  }
  reqUrl += memesrch;
  $.get(reqUrl, function( result ) {
    memeUrl = result['images'][0]['imageurl'];
  });
  return "<a href='" + memeUrl + "'><img src='" + memeUrl + "' style='height: 130px;' /></a>";
}

Here's the original Python function for it, if it might help:

def meme(srch):
    reqUrl = "http://api.pixplorer.co.uk/image?amount=1&size=tb&word=meme"
    if srch:
        memesrch = ""
        while srch:
            memesrch += srch[0] + "+"
            srch = srch[1:]
        memesrch = memesrch[:-1]
        reqUrl += memesrch
    memeUrl = eval(urllib2.urlopen(reqUrl).read())['images'][0]['imageurl']
    return "<a href='" + memeUrl + "'><img src='" + memeUrl + "' style='height: 130px;' /></a>"

My problem with this is that when I first run meme() in the console after a page load/reload, it says the variable memeUrl isn't defined. Then, from the second time onwards, it works fine. However, if I then type meme(["doge"]) or give any string in an array, or even just a string like meme("hello") to the meme() function, it doesn't return anything, not even an error. After that, anything I type returns nothing, not even something like 1+1, or 3, or $. After a few seconds the webpage crashes. Here are some screenshots: Screenshot of DevTools, Screenshot of Webpage Crash.

I have no idea what's causing these, as the only thing I can think of that could cause this problem is an infinite loop, but there isn't one in my code.

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Aug 10 '16 at 06:30
[`Array.prototype.join()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) — Andreas, Aug 10 '16 at 06:32

score 0 · Accepted Answer · answered Aug 10 '16 at 06:36

0

There is an infinite loop:

while (srch) {
    ...
}

srch.slice does not change the originial array "srch". Maybe this solves your issue: Instead of your while loop do the following:

memesrch = (srch typeof Array)
    ? '+' + srch.join('+')
    : '+' + srch;

answered Aug 10 '16 at 06:36

simialbi

507
3
10

Thanks for your help! When I replace the while loop with your suggestion, it says invalid token typeof. However, when I replace `srch.slice(1)` with `srch = srch.slice(1)` in my original script, it works perfectly fine, with one problem. The first request says memeUrl isn't defined, and then every request from then on returns the image of the previous request. I tried to fix this with `while (!memeUrl) {}` after the get request, but that doesn't fix it either. – Neelu S Aug 10 '16 at 06:48
Put this piece of code before your `$.get`: `var memeUrl = '';`. – simialbi Aug 10 '16 at 06:51
I tried doing that, but then it doesn't return anything. I tried changing `while (!memeUrl) {}` to `while (!memeUrl) {console.log(1);}` to check if it's in another infinite loop, and for some reason, it was. – Neelu S Aug 10 '16 at 06:58
Can you post your updated code? So I can see all of it? Or a [jsfiddle](https://jsfiddle.net/) or something... – simialbi Aug 10 '16 at 07:18
I just put it on JSFiddle: https://jsfiddle.net/k0rh8pwu/ Thanks again for all your help! – Neelu S Aug 10 '16 at 07:20
@NeeluS Check the link in my first comment: "_Possible duplicate of: ..._" – Andreas Aug 10 '16 at 07:48
@Andreas Thanks, I did see your comment, but I'm still learning JavaScript, and don't know enough to understand that. Thanks again though! :) – Neelu S Aug 10 '16 at 07:51
@NeeluS: https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron - Don't only read the marked "answer" – Andreas Aug 10 '16 at 07:53
http://jsfiddle.net/k0rh8pwu/7/ should work (maybe error because of https and http mixing but if both use http or both https it should work). The second problem was the mixing of synchronous and asynchronous functions: the `meme` function is synchronous called but the `$.get` request success function will be called asynchronous. That's why you i passed a function to `meme` function and called this in `$.get` success function after successful request. – simialbi Aug 10 '16 at 08:17
@Andreas Thanks for the link, it really helped :) – Neelu S Aug 10 '16 at 09:52
@simialbi Thanks for editing the JSFiddle, it works perfectly! Thanks so much! :) – Neelu S Aug 10 '16 at 09:53

Script causing DevTools to crash

1 Answers1