前端---场景题-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端---场景题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一个下拉框 200条数据怎么优化（默认展示10条）
60个请求（限制最多同时请求6个）请求并行方案
原生拖拽方案及实现细节（mouseMove、drag，drop） ✅ （有待继续完善）
数组遍历方法哪个快
手写函数实现数组。[12, 3, 24, 1, 932, 6423]按照首位排序
手写实现add函数满足 add(1)(2)(3)() 返回 6

2、60个请求（限制最多同时请求6个）请求并行方案

  <script>
    /**
     * 此问题目的为了解决类似http请求的并发量过大导致内存可能溢出的问题。
        1、同时执行任务数6个
        2、每执行一次就需要将请求 --
        3、当前任务队列执行完成之后，执行下一个
        4、所有任务添加到队列后，自动开始执行任务
     */
    debugger
    function concurrentPoll() {
        this.tasks = []; // 任务队列
        this.max = 10; // 最大并发数
        // 函数主体执行完后立即执行，由于setTimeout是macrotask（宏任务），promise是microtask（微任务）
        // 所以，addTask方法添加的函数会优先执行
        setTimeout(() => {
            this.run()
        }, 2000)
    }

    concurrentPoll.prototype.addTask = function (task) { // 原型添加任务方法
        this.tasks.push(task)
    }

    concurrentPoll.prototype.run = function () { // 原型任务运行方法
        if (this.tasks.length == 0) { // 判断是否还有任务
            return
        }
        const min = Math.min(this.tasks.length, this.max); // 取任务个数与最大并发数最小值
        console.log('min', min)
        for (let i = 0; i < min; i++) {
            this.max--; // 执行最大并发递减
            const task = this.tasks.shift(); // 从数组头部取任务
            task().then((res) => { // 重：此时可理解为，当for循环执行完毕后异步请求执行回调,此时max变为0
                debugger
                console.log(res)
                console.log('res', this.max) // 0 1 2 3 4 5 6 7 8 9 / 10 11 12
            }).catch((err) => {
                console.log(err)
            }).finally(() => { // 重：当所有请求完成并返回结果后，执行finally回调，此回调将按照for循环依次执行，此时max为0.
                debugger
                this.max++; // 超过最大并发10以后的任务将按照任务顺序依次执行。此处可理解为递归操作。
                // 0++ = 1 0++ = 1 0++ = 1
                this.run(); 
                //               1-- = 0  1-- = 0  1-- = 0
                // tasks.length  2        1        0
                console.log('finally', this.max)// 0 0 0 1 2 3 4 5 6 7之后执行.then,执行完之后再执行 8 9 10
            })
        }
    }

    const poll = new concurrentPoll(); // 实例
    for (let i = 0; i < 13; i++) { // 数据模拟
        poll.addTask(function () {
            return new Promise(
                function (resolve, reject) {
                    // 一段耗时的异步操作
                    resolve(i + '成功') // 数据处理完成
                    // reject('失败') // 数据处理出错
                }
            )
        })
    }


  </script>

3、原生拖拽方案及实现细节（mouseMove、drag，drop）

<script>
export default {
  name: 'drag',
  data() {
    return {
      afterData: ['', '', '', ''],
      beforeData: ['花', '好', '月', '圆'],
      resData: [
        ['花', '好', '月', '圆'],
        ['百', '年', '好', '合'],
        ['一', '帆', '风', '顺']
      ],
      beforeId: '',
      dragId: '',
      downMoveX: 0, // 按下的 div 移动的坐标
      downMoveY: 0,
      mouseX: 0, // 鼠标在 div中 x坐标
      mouseY: 0,
    }
  },
  mounted() {
    this.dragId = document.getElementById('drag')
    this.oldBlanks = document.querySelectorAll('.after')
    console.log('oldBlanks', this.oldBlanks)
    console.log('drag-offsetTop', this.dragId.offsetTop)
  },
  methods: {
    // handleDarg() {
      
    // },
    handleBeforeDown(e, id) {
      this.beforeId = document.getElementById(id)
      console.log('eeee->', e)
      const { offsetX, offsetY } = e
      this.mouseX = offsetX
      this.mouseY = offsetY
      this.downMoveX = this.beforeId.offsetLeft     
      this.downMoveY = this.beforeId.offsetTop
      console.log('this.downMoveY',  this.downMoveY)
      const setDiv = this.beforeId.style
      setDiv.background = 'pink'
      setDiv.position = 'absolute'
      setDiv.top = this.downMoveY + 'px'
      setDiv.left = this.downMoveX + 'px'
      setDiv.width = '98px'
      setDiv.height = '98px'
      
      this.beforeId.addEventListener('mousemove', this.handleBeforeMove)
      console.log('beforeId', this.beforeId)
    },
    handleBeforeMove(e){
      console.log('9023', e)
      console.log('232', window.event)
      const { offsetX, offsetY, clientX, clientY } = e
      let moveY = clientY - this.dragId.offsetTop - this.mouseY
      let moveX = clientX - this.dragId.offsetLeft - this.mouseX
      console.log('moveY-->', moveY)
      console.log('moveX-->', moveX)
      // 2、设置边界
      if (moveY <= 0) {
        moveY = 0
      } else if (moveY >= 500) {
        moveY = 500
      }
      if (moveX <= 0) {
        moveX = 0
      } else if (moveX >= 500) {
        moveX = 500
      }
      // 1、开始移动距离
      this.beforeId.style.top = moveY + 'px'
      this.beforeId.style.left = moveX + 'px'
    },
    handleBeforeUp() {
      if (this.beforeId) {
        this.handleDIvAdsorption()
        // this.beforeId.style = {}
        this.beforeId.removeEventListener('mousemove', this.handleBeforeMove)
        this.beforeId = ''
        this.mouseX = 0
        this.mouseY = 0
        this.downMoveX = 0  
        this.downMoveY = 0
      }
    },
    // 拖动的div，查看吸附哪个空白div上
    handleDIvAdsorption() {
      const whiteDivArea = this.oldBlanks[0].offsetWidth * this.oldBlanks[0].offsetHeight
      for (let i = 0;i < this.oldBlanks.length; i++) {
        if (this.afterData[i] !== '') {
          continue;
        }
        const oldDiv = this.oldBlanks[i]
        const { offsetTop, offsetLeft } = this.beforeId
        debugger
        let verticalLength = oldDiv.offsetHeight - ( offsetTop - oldDiv.offsetTop )
        console.log('verticalLength', verticalLength)
        let transverseLength = 0
        if (offsetLeft >= oldDiv.offsetLeft) {
          transverseLength = oldDiv.offsetWidth - (offsetLeft - oldDiv.offsetLeft)
        } else {
          transverseLength = oldDiv.offsetWidth - (oldDiv.offsetLeft - offsetLeft)
        }
        if (verticalLength > 0 && transverseLength > 0) {
          const occupiedArea = transverseLength * verticalLength
          console.log('transverseLength', transverseLength)
          if (occupiedArea / whiteDivArea >= 0.5 ) {
            console.log('在指定区域，可以吸附')
            this.handleSetMouseDiv(oldDiv.offsetTop, oldDiv.offsetLeft)
            this.afterData.splice(i, 1, this.beforeId.innerText)
            return
          }
          console.log('不可以吸附')
          this.handleSetMouseDiv(this.downMoveY, this.downMoveX)
        }
      }
    },
    handleSetMouseDiv(top, left){
      const setDiv = this.beforeId.style
      setDiv.top = top + 'px'
      setDiv.left = left + 'px'
    }
  }
}
</script>