input输入节流 

<template>
  <div>
      <div class="throttle">
          <div>输入框节流：</div>
          <input type="text" v-model="throttleTxt" placeholder="input输入框节流">
      </div>
      <div>{{throttleText}}</div>
  </div>
</template>

<script>
    export default {
        data(){
            return {
                throttleTxt:'',
                throttleText:''
            }
        },
        watch: {
            throttleTxt(newTxt){
                this.throttle(this.allQueryData, null, 500, newTxt);
            }
        },
        methods: {
            throttle(fn,context,delay,text){
                clearTimeout(fn.timer);
                fn.timer=setTimeout(() => {
                    fn.call(context,text);
                },delay);
            },
            allQueryData(text){
                this.throttleText = text
                if(text){
                    console.log('text',text)
                }else{
                    console.log('input为空')
                }
            },
        }
    }
</script>

 

js节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="search" type="text" name="search">
    
    <script>
        function queryData(text){
            console.log("搜索：" + text);
        }

        var input = document.getElementById("search");
        
        input.addEventListener("input", function(event){
            throttle(queryData, this.value);
        });
        
        function throttle(fn, text, delay = 500, mustApplyTime = 3000, context = null){
            clearTimeout(fn.timer);
            fn._cur = Date.now();  //记录当前时间
            
            if (!fn._start){      //若该函数是第一次调用，则直接设置_start,即开始时间，为_cur，即此刻的时间
                fn._start = fn._cur;
            }
            if (fn._cur-fn._start > mustApplyTime){
                //当前时间与上一次函数被执行的时间作差，与mustApplyTime比较，若大于，则必须执行一次函数，若小于，则重新设置计时器
                fn.call(context, text);
                fn._start = fn._cur;
            } else {
                fn.timer = setTimeout(function(){
                    fn.call(context,text);
                }, delay);
            }
        }
    </script>
</body>
</html>

 

posted @ 2020-03-25 12:04  日升月恒  阅读(1801)  评论(0)    收藏  举报