Google AJAX Transliteration API :- How do i translate many elements in page to some language at one stretch?_问答_开发者

I have many elements on page and all of which i want to translate to some language. The language is not the same for all fields, that is, for 1st field it may be fr and for third field it may be en then again for 7th field it may be pa.

Basically i wrote the code and it's working :-

    <script type="text/javascript">
         //<![CDATA[
          google.load("language", "1");

            window.onload = function(){
               var elemPostTitles = document.getElementsByTagName("h4");
               var flag = true;

               for(var i = 0 ; i < elemPostTitles.length ; i++){
                    while(flag == false){

                    }
                   var postTitleElem = elemPostTitles[i];
                   var postContentElem = document.getElementById("postContent_" + i);

                   var postTitle = postTitleElem.innerHTML;
                   var postCon开发者_如何转开发tent = postContentElem.innerHTML;
                   var languageCode = document.getElementById("languageCode_" + i).value;


                   google.language.detect(postTitle, function(result) {
                        if (!result.error && result.language) {
                            google.language.translate(postTitle, result.language, languageCode,
                            function(result) {
                            flag = true;
                            if (result.translation) {
                                    postTitleElem.innerHTML = result.translation;

                                }
                            });
                        }
                    });
                    flag = false;
               }

As you can see, what i am trying to do is restrict the loop from traversing until the result of previous ajax call is receieved. If i don't do this only the last field gets translated. My code works nicely, but because of the infinite loop, i keep getting errors from Mozilla to "stop executing scripts". How do i get rid of this? Also, is my approach correct? Or some inbuilt function is available which can ease my task? Thanks in advance :)

Why don't you call the function to check the next h4 recursively from within the detect/translate completed callbacks. Send the next recursion the next h4 using something like JQuery's next() function. What you're doing is running the endless loop on the same thread as the outer loop.

I suggest you post a more complete question and code next time to prevent people who like to provide working answers from having to spend time guessing what you are trying to do.

Here is a working example using recursion. Unless you have thousands of items, the tail should be tolerable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>

    <script type="text/javascript">

        google.load("language", "1");

        function initialize() {

            var elemPostTitles = document.getElementsByTagName("h4");
            var index = elemPostTitles.length - 1;
            foo(index);

            function foo(index) {

                var postTitleElem = elemPostTitles[index];
                var postTitle = postTitleElem.innerHTML;

                var postContentElem = document.getElementById("postContent_" + index);
                var postContent = postContentElem.innerHTML;

                var languageCode = document.getElementById("languageCode_" + index).value;


                google.language.detect(postTitle, function(result) {
                    if (!result.error && result.language) {
                        google.language.translate(postTitle, result.language, languageCode,
                            function(result) {

                                if (result.translation) {
                                    postTitleElem.innerHTML = result.translation;
                                }

                                if (--index > -1) {
                                    foo(index);
                                }
                            });
                    }
                });
            };

        }



        google.setOnLoadCallback(initialize);
    </script>

</head>
<body>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <input type="text" id="languageCode_0" value="en" />
    <div id="postContent_0">
    </div>
    <input type="text" id="languageCode_1" value="hi" />
    <div id="postContent_1">
    </div>
    <input type="text" id="languageCode_2" value="es" />
    <div id="postContent_2">
    </div>
    <input type="text" id="languageCode_3" value="fr" />
    <div id="postContent_3">
    </div>
    <input type="text" id="languageCode_4" value="ar" />
    <div id="postContent_4">
    </div>
</body>
</html>