js定时器的运用思考

最新推荐文章于 2022-09-20 14:51:55 发布

ic_xcc

最新推荐文章于 2022-09-20 14:51:55 发布

阅读量142

点赞数

分类专栏：前端 javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/ic_xcc/article/details/114300616

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

昨天突然接到一个小要求，需要用js完成，让自己好搞了一阵，由此记录一下此次任务心得。任务需求如下：

先上完成后代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div>

        <input id="test" type="text" class="box" onkeyup="send(event)"  style="width: 180px; height: 30px; margin: 15px">
    </div>
</div>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery-ui.js"></script>

<script>
    let timeFlag = true; // 连续输入标识
    let outFlag = false; // 停止后再次输入判断标识
    let continueFlag = true; // 连续输入一定时长标识
    let last = null; // 首次输入
    //键盘弹起监听事件
    function send(event){
        //得到输入的值
        var s = $("#test").val();
        if (last == null || outFlag ) {
            startInputed(s);
            outFlag = false;
        }
        last = event.timeStamp;
        // 连续输入判断
        setTimeout(function(){
            //如果停止输入1s内没其他keyup事件发生，则弹窗提示
            if(last == event.timeStamp){
                // 停止输入
                timeFlag = false;
                outFlag = true;
            } else {
                // 连续输入
                timeFlag = true;
                outFlag = false;
            }
        },100);

        // 连续输入计时器
        setTimeout(function(){
            //如果停止输入1s内没其他keyup事件发生，则弹窗提示
            if(last - event.timeStamp > 0 && timeFlag && continueFlag){
                hasInputed500(s);
                continueFlag = false;
                setTimeout(function(){
                    continueFlag = true;
                },500);
            }
        },500);
        // 停止一分钟未输入计时器
        setTimeout(function(){
            //如果停止输入1s内没其他keyup事件发生，则弹窗提示
            if(last == event.timeStamp && !timeFlag){
                stopedInput(s);
            }
        },60000);
    }

    function hasInputed500(val) {
        console.log(`连续输入500ms，参数：${val}`);
        // alert(`连续输入500ms，参数：${val}`);
    }

    function startInputed(val) {
        console.log(`100ms首次或停止后输入，参数：${val}`);
        // alert(`100ms首次或停止后输入，参数：${val}`);
    }
    
    function stopedInput(val) {
        console.log(`停止超过一分钟请求，参数：${val}`);
        // alert(`停止超过一分钟请求，参数：${val}`);
    }
</script>

</body>
</html>

任务后总结：其实完成后反观需求并不难，但是自己老是被卡住的地方就是关于定时器的运用理解不够，导致前期陷入疯狂死循环调用打印连续输入的事件。其实这段代码主要注意以下几点

1.连续输入判断，利用一个定时器专门判断输入是否连续，再用一个标识（例如我用的timeFlag）来为后续逻辑处理不同情况需要调用的不同事件

2.首次输入和停止后输入调用事情的判断，首次还简单也利用一个标识即可，主要是停止后输入，原先共用连续输入的判断，但一旦共用就导致每次输入都会调用停止后输入事情，于是我另起一个标识（outFlag）来控制是否是停止后输入，在判断是否连续输入时和停止输入后更改此标识状态。

3.每连续超过500ms调用事件，完成以上工作后就出现一旦连续输入后，满足连续超过500ms就会一直调用该事情，而不是每超过500ms调用一次，于是我在调用完连续500ms事情后又内嵌了一个定时器，在用一个标识（continueFlag）让该事件调用一次后距离下一次调用一定要等待500ms即可完成需求。

注：上述事件调用时间间隔太短较难完成，可手动调整一下时间查看效果

自此任务完成，也让自己又重新温故了一下