Front end---scene questions

1. How to optimize 200 pieces of data in a drop-down box (10 pieces are displayed by default)
2. 60 requests (up to 6 simultaneous requests) request parallel scheme
3. Native drag and drop scheme and implementation details (mouseMove, drag, drop) ✅ (to be improved)
4. Which method of array traversal is faster
5. Handwritten functions implement arrays. [12, 3, 24, 1, 932, 6423] sorted by the first
6. The handwritten implementation of the add function satisfies add(1)(2)(3)() and returns 6

2. 60 requests (up to 6 simultaneous requests) request parallel scheme

  <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. Native drag and drop scheme and implementation details (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>