【面经】携程暑期实习一面

一、简述

T0T感觉面试体验很好，面试官很耐心很温柔也很专业，就是我有点菜了捏，还有很多掌握得一般，经不起细问。希望不断查缺补漏，加油加油！

二、面试内容

1、笔试

‘手写防抖节流函数

简介：

- 防抖函数：函数的延迟执行；应用场景：当频繁触发同一个事件时，只有最后一次会被执行，减少了因为频繁的网络请求带来的开销

- 节流函数：会按照一定的频率来执行函数。节流类似于技能cd，不管你按了多少次，必须等到cd结束后才能释放技能。也就是说在如果在cd时间段，不管你触发了几次事件，只会执行一次。只有当下一次cd转换，才会再次执行。

参考博客：JS手写题-防抖-节流 - 掘金 (juejin.cn)

//防抖debounce函数
//------------------参考前面的博客
// 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间，默认为1秒钟
// 这里多传一个参数，immediate用来决定是否要第一次立即执行, 默认为false
function debounce(fn, delay = 1000, immediate = false) {
// 实现防抖函数的核心是使用setTimeout
    // time变量用于保存setTimeout返回的Id
    let time = null
    // isImmediateInvoke变量用来记录是否立即执行, 默认为false
    let isImmediateInvoke = false
    
    // 将回调接收的参数保存到args数组中
    function _debounce(...args) {
        // 如果time不为0，也就是说有定时器存在，将该定时器清除
        if (time !== null) {
            clearTimeout(time)
        }
        
        // 当是第一次触发，并且需要触发第一次事件
        if (!isImmediateInvoke && immediate) {
            fn.apply(this, args)
            // 将isImmediateInvoke设置为true，这样不会影响到后面频繁触发的函数调用
            isImmediateInvoke = true;
        }
        
        time = setTimeout(() => {
            // 使用apply改变fn的this，同时将参数传递给fn
            fn.apply(this, args)  
            // 当定时器里的函数执行时，也就是说是频繁触发事件的最后一次事件
            // 将isImmediateInvoke设置为false，这样下一次的第一次触发事件才能被立即执行
            isImmediateInvoke = false
        }, delay)
    }
    
    // 防抖函数会返回另一个函数，该函数才是真正被调用的函数
    return _debounce
}




//节流throttle函数
// leading参数用来控制是否第一次立即执行，默认为true
function throttle(fn, interval, leading = true) {
    //该变量用于记录上一次函数的执行事件
    let lastTime = 0
    // 内部的控制是否立即执行的变量
    let isLeading = true
    
    const _throttle = function(...args) {
        // 获取当前时间
        const nowTime = new Date().getTime()
        
        // 第一次不需要立即执行
        if (!leading && isLeading) {
            // 将lastTime设置为nowTime，这样就不会导致第一次时remainTime大于interval
            lastTime = nowTime
            // 将isLeading设置为false，这样就才不会对后续的lastTime产生影响。
            isLeading = false
        }
        
        // cd剩余时间
        const remainTime = nowTime - lastTime
        // 如果剩余时间大于间隔时间，也就是说可以再次执行函数
        if (remainTime - interval >= 0) {
            fn.apply(this, args)
            // 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
            lastTime = nowTime
        }
    }
    // 返回_throttle函数
    return _throttle
}

使用promise封装ajax原生请求

参考博客：(135条消息) 使用Promise封装简单Ajax方法_promise封装ajax_小黑ii的博客-CSDN博客

GET方法：

function getJSON (url) {
    return new Promise( (resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)

        //由于下面的回调函数由xhr对象调用，所以xhr的属性访问可以用this代替
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >=200 && xhr.status<300 || xhr.status == 304) {
                    resolve(xhr.responseText)
                } else {
                    var resJson = { code: xhr.status, response: xhr.response }
                    reject(resJson)
                }
            }
        }

        xhr.send()
    })

}

POST方法：

function postJSON(url, data) {
    return new Promise( (resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open("POST", url, true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status >=200 && this.status<300 || this.status == 304){
                    resolve(JSON.parse(this.responseText))
                } else {
                    var resJson = { code: this.status, response: this.response }
                    reject(resJson)
                }
            }
        }

        xhr.send(JSON.stringify(data))
    })
}