Hexo

let dom = document.querySelector(".div");
let btn = document.querySelector(".btn");
let start;
let arr = [];
const process = () => {
  dom.style.width = dom.offsetWidth + 1 + "px";
  if (dom.style.width < 100) {
    let time = +new Date();
    arr.push({ time: time - start });
    start = time;
    requestAnimationFrame(process);
  } else {
    console.log("finish");
  }
};

btn.onclick = () => {
  dom.style.width = 0;
  let time = +new Date();
  start = time;
  requestAnimationFrame(progress);
};

const work = [
  () => {
    console.log("A1");
  },
  () => {
    console.log("A2");
  },
  () => {
    console.log("B1");
  },
];

requestIdleCallBack(execJob);

const execJob = (time) => {
  while (time.timeRemaining() > 0 && work.length > 0) {
    runJob();
  }
};

const runJob = () => {
  let job = work.shift(); //取出，执行
  job();
};

/**
 * 为了确保兼容性，建议使用 requestAnimationFrame 的 polyfill 版本 raf
 */
const MOVE_ANIM_INTER = 1000
const raf = window.requestAnimationFrame; 

/**
 * 封装拖拽函数
 * @param $ele 需要拖拽的元素
 * @param adsorb { x = 20, y = 80 } 上下左右吸附的边距
 */
export default function draggable($ele, adsorb = { x: 20, y: 80 }) {
  if (!$ele) {
    throw new Error("必须是可拖拽元素");
  }
  // 开始时候的位置
  let startX = 0;
  let startY = 0;

  // 移动过程中的 left 和 top，其实通过这俩参数，就能确定元素位置
  let left = 0;
  let top = 0;

  // 屏幕的宽高
  const cw = document.documentElement.clientWidth;
  const ch = document.documentElement.clientHeight;

  // 获取到元素自身的宽高
  const { width, height } = $ele.getBoundingClientRect();

  /**
   * 开始拖拽的事件
   */
  $ele.addEventListener(
    "touchstart",
    function (event) {
      startX = event.targetTouches[0].pageX;
      startY = event.targetTouches[0].pageY;

      top = $ele.offsetTop;
      left = $ele.offsetLeft;

      event.preventDefault();
    },
    false
  );

  /**
   * 拖拽过程中的事件
   */
  $ele.addEventListener(
    "touchmove",
    function (event) {
      // 偏移距离
      const offsetX = event.targetTouches[0].pageX - startX;
      const offsetY = event.targetTouches[0].pageY - startY;

      $ele.style.top = `${top + offsetY}px`;
      $ele.style.left = `${left + offsetX}px`;
      $ele.style.right = "auto";
      $ele.style.bottom = "auto";

      event.preventDefault();
    },
    false
  );

  function touchDone(event) {
    const dx = event.changedTouches[0].pageX - startX;
    const dy = event.changedTouches[0].pageY - startY;

    const ty = top + dy;
    const tx = left + dx;

    $ele.style.top = `${ty}px`;
    $ele.style.left = `${tx}px`;
    $ele.style.right = "auto";
    $ele.style.bottom = "auto";

    const adsorb_safe_x = cw - width - adsorb.x;
    const adsorb_safe_y = ch - height - adsorb.y;

    raf(() => {
      console.log('raf')
      let nx;
      let ny = ty;

      if (tx + width / 2 < cw / 2) {
        nx = adsorb.x;
      } else {
        nx = adsorb_safe_x;
      }

      if (ty < adsorb.y) {
        ny = adsorb.y;
      } else if (ty > adsorb_safe_y) {
        ny = adsorb_safe_y;
      }

      $ele.style.webkitTransition = `left ${MOVE_ANIM_INTER}ms ease-in-out, top ${MOVE_ANIM_INTER}ms ease-in-out`;
      $ele.style.transition = `left ${MOVE_ANIM_INTER}ms ease-in-out, top ${MOVE_ANIM_INTER}ms ease-in-out`;

      const onAnimationDone = () => {
        $ele.style.webkitTransition = $ele.style.transition = "none";
        $ele.removeEventListener("webkitTransitionEnd", onAnimationDone, false);
        $ele.removeEventListener("transitionend", onAnimationDone, false);
      };

      $ele.addEventListener("webkitTransitionEnd", onAnimationDone, false);
      $ele.addEventListener("transitionend", onAnimationDone, false);
      $ele.style.top = `${ny}px`;
      $ele.style.left = `${nx}px`;
    });
  }

  $ele.addEventListener("touchend", touchDone, true);
  $ele.addEventListener("touchcancel", touchDone, true);
}

const { Command } = require('commander');
const program = new Command();
program.version('0.0.1');

program
  .option('-j | --join','Join IMWeb now!')

promise错误都可以通过 
window.addEventListener('unhandlerejection',e=>{console.log(e)})

poolLimit 限制并发数
array 任务
iteratorFn 迭代回调 用于实现对每个任务项进行处理，该函数会返回一个 Promise 对象或异步函数。

// 循环任务 创建异步任务，返回Promise 进行保存新的异步任务
// 并发数小于实际任务数，进行并发控制
// 执行后，移除已完成的任务
// 保存执行中的任务
// 执行中的大于限制任务 就进行Race
async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = [];
  const executing = [];
  for (const item of array) {
    const p = Promise.resolve().then(() => iteratorFn(item, array));
    ret.push(p);

    if (poolLimit <= array.length) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= poolLimit) {
        await Promise.race(executing);
      }
    }
  }
  return Promise.all(ret);
}

let timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i));
await asyncPool(2, [1000, 3000, 2000], timeout);

function fetch(url) {
  // 模拟接口请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(url);
    }, 1000);
  });
}

/**
 * 接口请求最大并发量控制
 * @param { Array } urls 接口请求地址数组集合
 * @param { Number } max 最大并发量
 * @param { Function } callback 回调函数
 */
function maxRequestLimit(arr, max, callback) {
  // 如果没有传入urls或max则不继续执行
  if (!arr || !max) return;

  // 当请求地址数组集合长度为0，则执行回调函数（如果有的话），并结束后续执行
  if (arr.length === 0) {
    if (callback) callback();
    return;
  }

  let fetchArr = [], // 存储并发max的promise数组
    i = 0;

  // 1.fetch
  // 2.执行并且放入存储队列
  // 3.判别并行数量与任务最大限制 如果超过通过race执行第一个完成的
  // 4.调用下函数自身
  function toFetch() {
    // 所有的请求都受理，则返回一个resolve
    if (i === arr.length) return Promise.resolve();

    // 取出第i个url， 放入fetch里面 , 每取一次i++
    let one = fetch(arr[i++]);

    //将当前的promise存入并发数组中
    fetchArr.push(one);

    // 当promise执行完毕后，从数组删除
    one.then((res) => {
      console.log(res);
      fetchArr.splice(fetchArr.indexOf(one), 1);
    });

    let p = Promise.resolve();

    // 当并行数量达到最大后， 用race比较 第一个完成的， 然后再调用一下函数自身。
    if (fetchArr.length >= max) p = Promise.race(fetchArr);

    return p.then(() => toFetch());
  }

  // fetchArr循环完后，现在fetchArr里面剩下的promise对象， 使用all等待所有的都完成之后执行callback
  toFetch()
    .then(() => Promise.all(fetchArr))
    .then(() => callback());
}
maxRequestLimit([1, 2, 3, 4, 5, 7, 8, 9], 3, () => {
  console.log("fetch end");
});

[1,2,3,4] 2 ,返回length
function deleteNum(arr,val){
  let k = 0
  for (let i =0;i<arr.length;i++){
    if(arr[i]!=val){
      arr[k++] = arr[i]
    }
  }
  return k
}

[1,2,3,4]  2

输入: (nums = [-1, 0, 3, 5, 9, 12]), (target = 9);
输出: 4;

function search(nums, target) {
  let l = 0,
    r = nums.length - 1;
  while (l <= r) {
    let mid = (l + r) >> 1; // 00101  -> 0010
    let isShort = nums[mid] < target; // target 右区间
    l = isShort ? mid + 1 : l; // 在右区间 【middle+1,right】
    r = isShort ? r : mid - 1; // 在左区间 【left,middle-1】
  }
  return -1;
}

[-4, -2, 0, 1, 2];
const sortedSquares = function (nums) {
  let res = [];
  for (let i = 0, j = nums.length - 1; i <= j; ) {
    const left = Math.abs(nums[i]);
    const right = Math.abs(nums[j]);
    if (right > left) {
      res.unshift(right * right);
      j--;
    } else {
      res.unshift(left * left);
      i++;
    }
  }
  return res;
};

let minSubArrayLen = function (target, nums) {
  const len = nums.length;
  let l = (r = sum = 0),
    res = len + 1; // 子数组最大不会超过自身
  while (r < len) {
    sum += nums[r++];
    // 窗口滑动
    while (sum >= target) {
      // r始终为开区间 [l, r)
      res = res < r - l ? res : r - l;
      sum -= nums[l++];
    }
  }
  return res > len ? 0 : res;
};
let result = minSubArrayLen(7, [2, 3, 1, 2, 4, 3]);

let str = "My name is yhq";
const reverseStr = (s) => {
  let left = 0;
  let right = s.length - 1;
  let quene = [];
  let word = "";
  while (s.charAt(left) === " ") left++;
  while (s.charAt(right) === " ") right--;
  while (left <= right) {
    let char = s.charAt(left);
    if (char === " " && word) {
      quene.unshift(word);
      word = "";
    } else if (char !== " ") {
      word += char;
    }
    left++;
  }
  quene.unshift(word);
  return quene.join(" ");
};
reverseStr(str);

class Stack {
  constructor() {
    this.items = [];
  }
  push(value) {
    this.items.push(value);
  }
  pop(value) {
    if (!this.isEmpty()) {
      this.items.pop(value);
    }
  }
  isEmpty() {
    return this.items?.length === 0;
  }
  size() {
    return this.items.length;
  }
}

const isPairing = (str) => {
  const stack = new Stack();
  for (let i of str) {
    if (i === "(") {
      stack.push(i);
    } else if (i === ")") {
      if (stack.isEmpty()) {
        return false;
      } else {
        stack.pop();
      }
    }
  }
  return stack.size() === 0;
};

const recordFirstUnit = (str) => {
  if (!str) return "";
  const mapData = new Map();
  for (let i of str) {
    if (mapData.has(i)) {
      mapData.set(i, mapData.get(i) + 1);
    } else {
      mapData.set(i, 1);
    }
  }
  for (let j of mapData.keys()) {
    if (mapData.get(j) === 1) {
      return j;
    }
  }

  return " ";
};

/**
 * 功能：单链表的插入、删除、查找
 * 【插入】：插入到指定元素后方
 * 1、查找该元素是否存在？
 * 2、没有找到返回 -1
 * 3、找到进行创建结点并插入链表。
 *
 * 【查找】：按值查找/按索引查找
 * 1、判断当前结点是否等于null，且是否等于给定值？
 * 2、判断是否可以找到该值？
 * 3、没有找到返回 -1；
 * 4、找到该值返回结点；
 *
 * 【删除】：按值删除
 * 1、判断是否找到该值？
 * 2、找到记录前结点，进行删除；
 * 3、找不到直接返回-1；
 * 
 *  
 * 数据域用于存放数据 
 * 指针域用于存放下一结点地址
 * 
 * 通过数据库访问结点的数据
 * 通过指针域访问当前结点的下一结点
 * head [1,2]->[3,4]->[5,null]
*/

//定义结点
class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

//定义链表
class LinkList {
  constructor() {
    //初始化头结点
    this.head = new Node("head");
  }

  //根据 value 查找结点
  findByValue = (value) => {
    let currentNode = this.head;
    while (currentNode !== null && currentNode.data !== value) {
      // 一直查找直到找到
      currentNode = currentNode.next;
    }
    //判断该结点是否找到
    console.log(currentNode);
    return currentNode === null ? -1 : currentNode;
  };


  //根据 index 查找结点
  findByIndex = (index) => {
    let pos = 0;
    let currentNode = this.head;
    while (currentNode !== null && pos !== index) {
      currentNode = currentNode.next;
      pos++;
    }
    //判断是否找到该索引
    console.log(currentNode);
    return currentNode === null ? -1 : currentNode;
  };


  //插入元素(指定元素向后插入)
  insert = (value, element) => {
    //先查找该元素
    let currentNode = this.findByValue(element);
    //如果没有找到
    if (currentNode == -1) {
      console.log("未找到插入位置!");
      return;
    }
    let newNode = new Node(value);
    // currentNode.next 为元素的临时指针
    // newNode.next 插入元素的下一个
    // 插入元素的下一个指向 存放元素的临时指针
    newNode.next = currentNode.next;
    // 元素的下一指针指向新元素
    currentNode.next = newNode;

  };

  

  //根据值删除结点
  delete = (value) => {
    let currentNode = this.head;
    //保留删除节点的前一节点  1->2->3->4
    let preNode = null;
    while (currentNode !== null && currentNode.data !== value) {
      // 删除结点的前一结点
      preNode = currentNode;
      // 删除结点
      currentNode = currentNode.next;
    }
    if (currentNode == null) return -1;
    // 删除结点的前一结点指向删除结点的下一结点
    preNode.next = currentNode.next;
  };
  
  //遍历所有结点
  print = () => {
    let currentNode = this.head;
    //如果结点不为空
    while (currentNode !== null) {
      console.log(currentNode.data);
      currentNode = currentNode.next;
    }
  };
}

//测试
const list = new LinkList();
list.insert("xiao", "head");
list.insert("lu", "xiao");
list.insert("ni", "head");
list.insert("hellow", "head");
list.print();
console.log("-------------删除元素------------");
list.delete("ni");
list.delete("xiao");
list.print();
console.log("-------------按值查找------------");
list.findByValue("lu");
console.log("-------------按索引查找------------");
list.print();