欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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代码: