具有相同名称的嵌套settimeout，这样做会产生任何影响

Question

我刚刚浏览了type .js的源代码，基本上这个插件的主要函数使用了多个setTimeout相互嵌套的设计模式，看看代码:

self.timeout = setTimeout(function() {
    // check for an escape character before a pause value
    // format: ^d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
    // single ^ are removed from string
    var charPause = 0;
    var substr = curString.substr(curStrPos);
    if (substr.charAt(0) === '^') {
        var skip = 1; // skip atleast 1
        if (/^^d+/.test(substr)) {
            substr = /d+/.exec(substr)[0];
            skip += substr.length;
            charPause = parseInt(substr);
        }
        // strip out the escape character and pause value so they're not printed
        curString = curString.substring(0, curStrPos);
    }
    if (self.contentType === 'html') {
        // skip over html tags while typing
        var curChar = curString.substr(curStrPos).charAt(0);
        if (curChar === '<' || curChar === '&') {
            var tag = '';
            var endTag = '';
            if (curChar === '<') {
                endTag = '>';
            } else {
                endTag = ';';
            }
            while (curString.substr(curStrPos).charAt(0) !== endTag) {
                tag += curString.substr(curStrPos).charAt(0);
                curStrPos++;
            }
            curStrPos++;
            tag += endTag;
        }
    }
    // timeout for any pause after a character
    self.timeout = setTimeout(function() {
        if (curStrPos === curString.length) {
            // fires callback function
            self.options.onStringTyped(self.arrayPos);
            // is this the final string
            if (self.arrayPos === self.strings.length - 1) {
                // animation that occurs on the last typed string
                self.options.callback();
                self.curLoop++;
                // quit if we wont loop back
                if (self.loop === false || self.curLoop === self.loopCount)
                    return;
            }
            self.timeout = setTimeout(function() {
                self.backspace(curString, curStrPos);
            }, self.backDelay);
        } else {
            /* call before functions if applicable */
            if (curStrPos === 0)
                self.options.preStringTyped(self.arrayPos);
            // start typing each new char into existing string
            // curString: arg, self.el.html: original text inside element
            var nextString = curString.substr(0, curStrPos + 1);
            if (self.attr) {
                self.el.attr(self.attr, nextString);
            } else {
                if (self.isInput) {
                    self.el.val(nextString);
                } else if (self.contentType === 'html') {
                    self.el.html(nextString);
                } else {
                    self.el.text(nextString);
                }
            }
            // add characters one by one
            curStrPos++;
            // loop the function
            self.typewrite(curString, curStrPos);
        }
        // end of character pause
    }, charPause);
    // humanized value for typing
}, humanize);

我理解上面的代码没有问题，但我有点怀疑在彼此中使用多个settimeout与相同的名称即

self.timeout

这样做可以吗?使用settimeout彼此嵌套有任何影响吗?或者这种编码方法完全没问题。当我在代码中看到具有相同名称的setTimeouts时，我的脑海中有一个很大的问号。

CODE ON GIT

谢谢。

Alex-z

Answer 1

将多个setTimeout()返回值赋给同一个变量self.timeout是没有问题的。

但是您将失去清除clearTimeout()之前所有超时的可能性，因为self.timeout每次都被最后一个setTimeout()返回值覆盖。

但是，在您提供的特定代码示例中没有使用clearTimeout()。因此，虽然失去了它的目的，将返回值赋给相同的变量self.timeout也是无用的。