JS 节流和防抖前端面试必问

何时使用节流法和防抖法？

1.当我们在搜索商品的时候每次输入内容都要进行查询很浪费资源。这个时候比较适合防抖法，因为防抖法只要你在规定的时间内的最后一次内容。

比如吧：公交车按照规定只能在一个站盘没有乘客上车的情况下等待10秒。如果在10秒内有乘客上车则重新等待10秒钟，依次类推直到10内没人上车。大概就是这个意思。

我感觉吧就是一个防抖技术没有必要抽离出太多的东西实现了就行没有那么麻烦建议时间设置为（小于等于 800 秒可以少不建议多）

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

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>

   <input type="text">
</body>

</html>
<script>
   let input = document.querySelector('input')
   var timer = null
   input.addEventListener('keyup', function (e) {
    
    

   	clearTimeout(timer)

   	timer = setTimeout(() => {
    
    

   		console.log(e.target.value); //在这个里面发送请求 当然也可以抽离出来

   	}, 800)  //子规定时间
   
   })
///------------------------像这样抽离出来也可以
let input = document.querySelector('input')
   var timer = null
   input.addEventListener('keyup', function (e) {
    
    

   	clearTimeout(timer)

   	timer = setTimeout(() => {
    
    
   		ajax(e.target.value)
   	}, 800)

   })

   function ajax(content) {
    
    
   	console.log(content);
   }
</script>

节流法这个比较适合页面的滑动或者鼠标特效比如鼠标跟着一个动态星星图一直不停的动因为节流法是有固定时间的（建议短时间）在你定时间内才出发。自我感觉不适合input内容

比如：你们村村长规定 9点以后没得水喝，你是村霸也不中。村长把阀门给关闭了。规定早上8点才有水喝。带有阀门和固定时间的事件函数。

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

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- lodash.js     _.throttle节流  _.debounce  -->
   <input type="text" id='throttle' />
</body>

</html>
<script>
   let input = document.querySelector('input')
   var flag = true

   input.addEventListener('keyup', function (e) {
    
    
   	if (flag) {
    
    
   		flag = false
           console.log(e.target.value);
   		setTimeout(() => {
    
    
   			flag = true
   		}, 800)

   	}
   })

</script>

高超的技术总是有大佬帮我封装好各种js 节流和防抖那必然是有的！

lodash.js 这是官网地址

嫌麻烦的可以做值下载
链接：https://pan.baidu.com/s/1UfGur_jxZxH0B5q77d56ng
提取码：1234
复制这段内容后打开百度网盘手机App，操作更方便哦

1.0如何只是不同的html文件那就这样使用：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- lodash.js     _.throttle节流  _.debounce  -->
  <input type="text" id='throttle' />
</body>
<script src="../lodash.js"></script>

</html>
<script>
  let input = document.querySelector('input')
  var flag = true
//这是规定的 不建议使用input哈 我只是做个例子
  input.addEventListener('keyup', _.debounce(function (e) {
    
      
  //节流  _.throttle    防抖_.debounce
  	if (flag) {
    
    
  		flag = false
  		console.log(e.target.value);
  		setTimeout(() => {
    
    
  			flag = true
  		}, 800)

  	}
  }))
</script>

至于 vue 中使用嘛 LOOK：

$ npm i -g npm
$ npm i --save lodash
//如需在 Node.js < 6 的 REPL 环境中使用 Lodash，请安装 n_。
import throttle from 'lodash/throttle' // 局部引用
import _ from "lodash" 
// 全局引用，下方的throttle改成_.throttle即可 
//( 也可再main.js中挂载在vue的prototype中，
//页面组件中通过this._.throttle进行调用)

export default{
    
    
 methods:{
    
    
    click: throttle(function(){
    
    
        console.log('OK')
    },800)
 }
}

JS 节流和防抖 前端面试必问