JavaScript模拟实现键盘打字效果_javascript技巧
程序员文章站
2022-04-29 09:50:55
...
$(function () { var input_type = { init:function ($obj) { this.name = $obj.html().split("") this.length = this.name.length; this.i = 0; }, pri:function () { var $this = this //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象。而此时我需要递归,所以只能将this对象传到闭包内,递归匿名的闭包函数。 return (function () { if ($this.i > $this.length) { window.clearTimeout(Go) return false; } var char = $this.name $(".div1").append(char[$this.i]) $this.i++ var Go = window.setTimeout(arguments.callee, 100)//在这里arguments.callee妙用因为是匿名闭包,调用函数本身。 }) } } //建立class类 function Input_type() { this.init.apply(this, arguments) } Input_type.prototype = input_type //创建实例 var p = new Input_type($(".content")) p.pri()() });
总结:为了实现每次循环间隔时间,用window.settimeout递归的写法。 因为想用原型链封装,this冲突,所以递归调用匿名的闭包函数。用arguments.callee表示匿名函数。
HTML代码:
推荐阅读
-
JavaScript模拟实现*落体效果
-
JavaScript模拟实现*落体效果
-
javascript中的缓动效果实现程序_javascript技巧
-
JS实现简单的顶部定时关闭层效果_javascript技巧
-
利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧
-
javascript suggest效果 自动完成实现代码分享_javascript技巧
-
用js实现键盘方向键翻页功能的代码_javascript技巧
-
原生Js实现按的数据源均分时间点幻灯片效果(已封装)_javascript技巧
-
用javascript来实现动画导航效果的代码_javascript技巧
-
用CSS+JS实现的进度条效果效果_javascript技巧