m.lom599.com_手机版乐白家网址_乐百家手机首页登录

定时器setTimeout无法调用局部变量的解决办法,的

作者: 手机版乐白家网址  发布:2019-08-01

这篇文章,主要是关于javascript和select相关的最基本方法,以供不熟悉javascript的人参考。常见的情况是,提出表单结构的人, 不仅仅需要为程序设计逻辑,创建数据结构,还需要设计表单的样式,以及熟悉javascript;某些公司可能会要求您精通photoshop:最初的时候,我们都是全才。

复制代码 代码如下:

javascript中定时器setTimeout的用法一般如下,调用beginrotate之后就进入定时执行rotateloop的一个过程,如下代码:

下面是我们例子的基础;这不是一个标准的表单。

/***************滚动场次开始*****************/

复制代码 代码如下:

<form id="f">
<select size="1" name="s">
<option value="jb51.net">脚本之家</option>
<option value="baidu.com">百度</option>
</select>
</form>

function ScrollText(content, btnPrevious, btnNext, autoStart) {
    this.Delay = 10;
    this.LineHeight = 20;
    this.Amount = 1;
    this.Direction = "up";
    this.Timeout = 1500;
    this.ScrollContent = this.$(content);
    this.ScrollContent.innerHTML = this.ScrollContent.innerHTML;
    //this.ScrollContent.scrollTop = 0;
    if (btnNext) {
        this.NextButton = this.$(btnNext);
        this.NextButton.onclick = this.GetFunction(this, "Next");
        this.NextButton.onmouseover = this.GetFunction(this, "Stop");
        this.NextButton.onmouseout = this.GetFunction(this, "Start");
    }
    if (btnPrevious) {
        this.PreviousButton = this.$(btnPrevious);
        this.PreviousButton.onclick = this.GetFunction(this, "Previous");
        this.PreviousButton.onmouseover = this.GetFunction(this, "Stop");
        this.PreviousButton.onmouseout = this.GetFunction(this, "Start");
    }
    this.ScrollContent.onmouseover = this.GetFunction(this, "Stop");
    this.ScrollContent.onmouseout = this.GetFunction(this, "Start");
    if (autoStart) {
        this.Start();
    }
}

var angle = 0;


ScrollText.prototype.$ = function (element) {
    return document.getElementById(element);
}

function rotateloop() {
if (angle < 360) {
angle ;
//use angle
//......
setTimeout("rotateloop()", 100);
}
}

复制代码 代码如下:

ScrollText.prototype.Previous = function () {
    clearTimeout(this.AutoScrollTimer);
    clearTimeout(this.ScrollTimer);
    this.Scroll("up");
}

function beginrotate() {
//do something
//......
setTimeout("rotateloop()", 100);
}

<script type="text/javascript">
<!--
var f = document.getElementById("f");

ScrollText.prototype.Next = function () {
    clearTimeout(this.AutoScrollTimer);
    clearTimeout(this.ScrollTimer);
    this.Scroll("down");
}

这段代码有一个问题,就是产生了一个全局变量angle,这显然不是好的编程习惯,所以我们想到使用内嵌函数的方式,将代码改成如下:

//获得select列表项数目
document.write(f.s.options.length);
document.write(f.s.length);

ScrollText.prototype.Start = function () {
    clearTimeout(this.AutoScrollTimer);
    this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);
}

复制代码 代码如下:

//当前选中项的下标(从0 开始)(有两种方法)
//如果选择了多项,则返回第一个选中项的下标
document.write(f.s.options.selectedIndex);
document.write(f.s.selectedIndex);

ScrollText.prototype.Stop = function () {
    clearTimeout(this.ScrollTimer);
    clearTimeout(this.AutoScrollTimer);
}

function beginrotate() {

//检测某一项是否被选中
document.write(f.s.options[0].selected);

ScrollText.prototype.AutoScroll = function () {
    if (this.Direction == "up") {
        if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
            this.ScrollContent.scrollTop = 0;
        }
        this.ScrollContent.scrollTop = this.Amount;
    } else {
        if (parseInt(this.ScrollContent.scrollTop) <= 0) {
            this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
        }
        this.ScrollContent.scrollTop -= this.Amount;
    }
    if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
        this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Delay);
    } else {
        this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);
    }
}

var angle = 0;

//获得某一项的值和文字
document.write(f.s.options[0].value);
document.write(f.s.options[1].text);

ScrollText.prototype.Scroll = function (direction) {
    if (direction == "up") {
        if (this.ScrollContent.scrollTop == 0) {
            this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
        }
        this.ScrollContent.scrollTop -= this.Amount;
    } else {
        this.ScrollContent.scrollTop = this.Amount;
    }
    if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
        this.ScrollContent.scrollTop = 0;
    }
    if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
        this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Delay);
    }
}

function rotateloop() {
if (angle < 360) {
angle ;
//use angle
//......
setTimeout("rotateloop()", 100);
}
}
//do something
//......
setTimeout("rotateloop()", 100);
}

//删除某一项
f.s.options[1] = null;

ScrollText.prototype.GetFunction = function (variable, method, param) {
    return function () {
        variable[method](param);
    }
}

这样子改了之后,发现javascript报错了,rotateloop找不到,显然setTimeout没有找到rotateloop这个局部内嵌函数,这里只要稍微改一下就可以解决这个问题了,代码如下:

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:定时器setTimeout无法调用局部变量的解决办法,的

关键词: m.lom599.com 乐百家lo599