setInterval函数简单实现实时统计字符长度

一则小故事:

  古代的街头,杂技班师傅带领两个徒弟在表演,引来众人围观。

  大徒弟单臂举着一根近十米长的竹竿,小徒弟则爬到竿头,做各种高难度动作,围观群众一片叫好。可这个师傅就静静地坐在一旁喝茶。

  突然小徒弟好像不小心一下子从竿上滑了下来,周围的人都情不自禁地倒吸了一口凉气,可是他一下子停住了,用双脚挂在竹竿上,向周围的人们做了个鬼脸,哦,原来是假的,大家都不约而同地一起鼓掌,连连叫好,可是他的师傅还是看都不看一眼。大家都很奇怪。

  终于表演结束了,人群陆续散去,可是这时候师傅却不再喝茶,紧张地盯着他的小徒弟,直到他平安回到地面,师傅才再次拿起了茶碗……

  旁边的人不理解,问师傅,为什么刚才那么惊险的时候您看都不看,他都表演完了,你才去紧张呢?

  师傅说:刚才他在竹竿上表演,他自己也知道惊险,稍不小心就会掉下来,所以他自己就会很小心很努力很注意,可是都表演完了,马上就回到地面了,他的内心难免会松懈,所以这个时候我才更要叮嘱他,不要松了那根弦……

------------------------------------------------------------------------^_^我是分割线------------------------------------------------------------------------

在项目中,解决问题的思路总是因为紧迫的项目进度和特殊的专注力而变得无比的清晰,可是项目一结束,什么code、优化、算法全都不认识了。哎,可悲。没有惊人的记忆力,只能傻傻的记录常用的技巧,节约开发的时间来解决新问题。

常常遇到需要实时统计已输入的字符串长度,类似于编辑短信时,会出现提示用户还能输入多少文字的提示。在此就用常见的setTimeout()方法来简单实现:

 1 <body>
 2         <div id="page_suggest">
 3             <div class="top">
 4                 <div>请输入:</div>    
 5                 <textarea class='content' maxlength='140'></textarea><!--这里设置了文本域的最大输入长度-->
 6             </div>
 7             <div class='bottom'>
 8                 <div class='last'>还可以输入:<span class='number'>140</span></div>
 9                 <div style='clear: both;'></div>
10             </div>
11         </div>
12         <script type="text/javascript">
13             var intervalNum = null;
14             $('#page_suggest .content').focus(function(){
15                     intervalNum = setInterval(checkLen, 300);
16                 }).blur(function() {
17                     clearInterval(intervalNum);
18                 });
19 
20             function checkLen(){
21                 var len = 140 - $('#page_suggest .content').val().length;
22                 console.log(len);
23                 $('#page_suggest .bottom .number').html(len);
24             }
25         </script>
26     <body>

 效果图:

  (截图无法体现其实时统计的功能...)

最后再总结下,setTimeout()和setInterval()两个方法,同时在示例中展示常见的几个问题:

setTimeout()

 用于在指定的毫秒数后调用函数或计算表达式(只执行一次,可通过创建一个函数循环重复调用setTimeout,来实现重复操作)

示例:

setTimeout("functionName()",1000);

setTimeout(functionName,1000);

setTimeout("alert('1秒!')",1000);

最困惑的一种情况是使用函数名作为调用句柄时都不能带参数,解决办法如下(转):

再写一个函数,该函数返回一个不带参数的函数:

function show(name){alert(name + " ,你好!");}

function briage(name){return function(){show(name);}}

setTimeout(briage("小明"),1000); 

 另一种简洁的写法即调用匿名函数:

setTimeout(function(){alert("hello world!");},1000);

clearTimeout()

var timeId = setTimeout(...);

clearTimeout(timeId);

若隔5秒后执行函数或计算表达式,函数主体需要5秒执行完,那么整个setTimeout函数要10秒才执行一次。

只要执行了clearTimeout(),不论setTimeout()执行到什么阶段都会立即终止

setInterval()

可按照指定的周期(毫秒)来调用函数或计算表达式

与setTimeout()不同,不论调用的函数或计算表达式需要多长时间才能执行完,它都只是简单的每隔一定时间就重复执行一次那个函数或计算表达式。

示例和setTimeout()相同

clearInterval()

示例与clearTimeout()相同

如何选择使用:

如果要求在每隔一个固定的时间间隔后就精确地执行某个动作,最好使用setInterval();

如果不想由于连续调用产生相互干扰问题,尤其是每次函数的调用需要繁重的计算及很长的处理时间,那么最好使用setTimeout()

 

原文地址:https://www.cnblogs.com/bikeway/p/3966879.html