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

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

  • 节流的原理很简单:如果你持续触发某个事件,特定的时间间隔内,只执行一次。

  • 如鼠标拖动事件,鼠标多次点击事件,当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行

  • 直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。
    不用节流的写法,尝试过就会发现事件在短时间内会不停触发,看到的效果也不好,数字改变的太快了

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>Documenttitle>
    <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开头的城市,不用定时器限制执行时间的话,会觉得明细切换太快了
学习js函数节流,优化性能_第1张图片

<template>
    
     
       <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>
    
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("刚结束触摸");
        }

有关引用 https://blog.csdn.net/jbj6568839z/article/details

你可能感兴趣的:(js进阶,javascript,学习,前端)