学习js函数节流，优化性能

最新推荐文章于 2024-06-12 11:59:04 发布

奋斗的菜鸟.com

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量173

点赞数 1

分类专栏： js进阶文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/CodePrincess/article/details/125791861

版权

js进阶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做优化时，偶然看到了防抖和节流，让我们先简单的聊一下节流吧
节流就是阻止一个函数在指定时间段内频繁的执行，是其在指定时间段内只能执行一次方法

节流的原理很简单：如果你持续触发某个事件，特定的时间间隔内，只执行一次。
如鼠标拖动事件，鼠标多次点击事件，当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行
直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。
不用节流的写法，尝试过就会发现事件在短时间内会不停触发，看到的效果也不好，数字改变的太快了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrapper {
            width: 100%;
            height: 140px;

            background: skyblue;

            color: #fff;
            font-size: 30px;
            font-weight: bold;
            line-height: 140px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="wrapper"></div>

   
</body>
<script>
        var count = 1;
        function moveAction () {
             oWrapper.innerHTML = count++;              
        }

        var oWrapper = document.querySelector('#wrapper');
		oWrapper.onmousemove = moveAction;


    </script>

</html>

节流思想的写法运用定时器，在规定事间内才执行真正的方法，改变一个数字大小，这样即使触发的太快，数字也是500毫秒才改变一个

 <script>
        var count = 1;
        let timer=null;
        let n=0;
        let set=0;
        //启动单个定时器，在延迟后调用指定的功能。该函数返回一个唯一的ID，该Id可以用于取消定时器    var id = setTimeout(fn, delay); 
        function moveAction () {
            n++;
            if(timer){  
            //这个timer每次执行完都会变成null,如果没执行，重复调用这个函``						数的话，直接return，好办法！！                
                console.log("n执行了"+n+'次')
                return;
            } //一般n这个语句执行了20多次，定时器回调才执行2次，
            timer=setTimeout(function(){ //timer什么时候有?timer是每个开					启的定时器的唯一标志
                set++;
                console.log("set执行了"+set+'次')
                console.log("stimer："+timer)
                oWrapper.innerHTML = count++;
                timer=null;
            },500) 
        }

        var oWrapper = document.querySelector('#wrapper');
		oWrapper.onmousemove = moveAction;


    </script>

这个节流思想原来之前在练手vue时，也有应用，只是当时没发觉
要实现的时滑动右侧一列字母时，明细数据也随之切换，如滑动到H,明细里也跟着显示H开头的城市，不用定时器限制执行时间的话，会觉得明细切换太快了
在这里插入图片描述

<template>
    <!-- <div id="container_alpha" > -->
     
       <ul class="alphbet_list" ref="container_box"> 
        <li class="item" v-for="item of alphas" :key="item.id" @click="change_CityList($event)"
        @touchmove="handleTouchMove"   @touchend="handleTouchEnd"    @touchstart="handleTouchStart" :ref="item.alpha">
            {{item.alpha}}   
        </li>
        
    </ul>
    <!-- </div> -->
</template>

handleTouchStart(e){
            this.touch_start=true;
            // console.log('开始触摸');
            
        },
        handleTouchMove(e){
            let alpha_arr=[];
            for(let i in this.alpha_obj){
                alpha_arr.push(i);
            }
            if(this.timer){//函数截留
                //clearTimeout(this.timer);
                return;
            }
            let that=this;
            this.timer=setTimeout(function(){  //箭头函数中的this,限制拖动显示频率
                if(that.touch_start==true){
                // let y=this.$refs['A'][0].offsetTop;//offsettop是相对于父元素而言的
                    let top_a=that.$refs['A'][0].getBoundingClientRect().top,
                    top_b=that.$refs['B'][0].getBoundingClientRect().top;
                    let cur_y=e.touches[0].clientY
                    let dev=Math.floor((cur_y-top_a)/( top_b-top_a));
                    if(dev>=0&&dev<alpha_arr.length){
                        let letter=alpha_arr[dev];
                        that.$parent.handleLetterChange(letter);
                    }
                     that.timer=null;//执行了定时器就将timer置为null
                }
            },16)
            
            // console.log("触摸不松动");
        },
        handleTouchEnd(){
            this.touch_start=false;
            // console.log("刚结束触摸");
        }