趣谈JS那些点

谈谈JS那些点

1、防抖

定义：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

【模板代码】

function debounce(fn, time){
    let timer
    return function(){
        clearTimeout(timer)
        let args = arguments
        timer = setTimeout(()=>{
            fn.apply(this,args)
        },time)
    }
}

【防抖的应用场景】：用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。

【实例代码】：实现输入框的防抖

 var timer = null                    // 1. 防抖动的 timer

 function debounceSearch(keywords) { // 2. 定义防抖的函数
    timer = setTimeout(function() {
    // 发起 JSONP 请求
    getSuggestList(keywords)
    }, 500)
 }

 $('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
    clearTimeout(timer)
    // ...省略其他代码
    debounceSearch(keywords)
 })

2、节流

定义：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

【模板代码】：

function throttle(fn, time){
    let timer=null
    return function(){
        if(timer) return 
        timer = setTimeout(()=>{
            fn.apply(this, arguments)
            timer = null
        },time)
    }
}

【节流的应用场景】： ①鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

​ ②懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

【节流阀的概念】：

节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。

当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。

每次执行操作前，必须先判断节流阀是否为空。

理解：

高铁卫生间是否被占用，由红绿灯控制，红灯表示被占用，绿灯表示可使用。

假设每个人上卫生间都需要花费5分钟，则五分钟之内，被占用的卫生间无法被其他人使用。

上一个人使用完毕后，需要将红灯重置为绿灯，表示下一个人可以使用卫生间。

下一个人在上卫生间之前，需要先判断控制灯是否为绿色，来知晓能否上卫生间。

【实例代码】：使用节流优化鼠标跟随效果

$(function() {
  var angel = $('#angel')
  var timer = null // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
    timer = setTimeout(function() {
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
    }, 16)
  })
})

总结防抖和节流的区别

• 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面 N 多次的触发都会被忽略！

• 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！

3、高阶函数

定义：接收、或返回另外一个函数的函数被称为高阶函数。常见的像数组的map、reduce、filter这些都是高阶函数

【模板代码】：

function add(x, y, fn){
    return fn(x) + fn(y)
}

function fn(num){
    return Math.abs(num)
}

add(-5, 6, fn) //11

4、函数柯里化

定义：函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术，

【模板代码】：

  //普通add函数
  function add(x, y){
    return x + y
  }
  //柯里化后
  function curryingAdd(x){
    return function(y){
        return x + y
    }
  }
  add(1, 2)             //3
  curryingAdd(1)(2)     //3

5、数组去重

①Set去重

    // ①Set去重 
    const arr = [1,1,2,2,3,3,4,4,5,5]
    let mySet = new Set(arr) 
    const res = Array.from(mySet)
    console.log(res);

②filter去重

    // ②filter去重
    // const removeRepeat =  arr.filter((item, index) =>  arr.indexOf(item, 0) === index)
    // console.log(removeRepeat);
    const removeRepeat = (arr) => { return arr.filter((item, index) => arr.indexOf(item, 0) === index)} 
    console.log(removeRepeat(arr));

③includes去重

   // ③includes去重
    const removeRepeat1 = (arr) => {
        let repeatArr = []
        for (let i = 0; i < arr.length; i++) {
            if(!repeatArr.includes(arr[i])) repeatArr.push(arr[i])
        }
        return repeatArr
    }
    console.log(removeRepeat1(arr))