[{"data":1,"prerenderedAt":1559},["ShallowReactive",2],{"\u002Fpost\u002Fcommon-frontend-interview-questions":3},{"id":4,"title":5,"body":6,"date":1544,"description":43,"extension":1545,"hidden":1546,"image":1547,"meta":1548,"navigation":882,"path":1549,"seo":1550,"sitemap":1551,"stem":1552,"subtitle":1553,"tags":1554,"__hash__":1558},"posts\u002Fpost\u002Fcommon-frontend-interview-questions.md","常見的前端面試手寫考題，deepClone、debounce、throttle",{"type":7,"value":8,"toc":1535},"minimark",[9,16,21,24,37,103,511,514,521,524,527,745,1273,1277,1285,1289,1523,1526,1531],[10,11,12],"blockquote",{},[13,14,15],"p",{},"相關函式的詳細解釋這邊就不做特別說明，這篇只專注在 code 的部分",[17,18,20],"h2",{"id":19},"deepclone","deepClone",[13,22,23],{},"請實作一個簡易版的 deepClone",[10,25,26],{},[13,27,28,29,36],{},"(2023\u002F5\u002F22 更新) Web API 有一個叫做",[30,31,35],"a",{"href":32,"rel":33},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FstructuredClone",[34],"nofollow","structuredClone","的 API，已經可以實現 deepClone 的功能，但是各家的瀏覽器都是近幾個版本才支援的，所以如果有舊版本瀏覽器的話，要做好兼容性。",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-js shiki shiki-themes light-plus tokyo-night","\u002F\u002F 最簡易，但要考慮會有什麼限制？ 為什麼這樣可以？\nconst cloned = JSON.parse(JSON.stringify(objectToClone))\n","js","",[45,46,47,56],"code",{"__ignoreMap":43},[48,49,52],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"shM36","\u002F\u002F 最簡易，但要考慮會有什麼限制？ 為什麼這樣可以？\n",[48,57,59,63,67,71,75,78,82,86,89,91,94,96,100],{"class":50,"line":58},2,[48,60,62],{"class":61},"sucPa","const",[48,64,66],{"class":65},"sq2Xa"," cloned",[48,68,70],{"class":69},"s6v6z"," =",[48,72,74],{"class":73},"s1TMK"," JSON",[48,76,77],{"class":69},".",[48,79,81],{"class":80},"sjNAT","parse",[48,83,85],{"class":84},"sNwUV","(",[48,87,88],{"class":73},"JSON",[48,90,77],{"class":69},[48,92,93],{"class":80},"stringify",[48,95,85],{"class":84},[48,97,99],{"class":98},"sJUHq","objectToClone",[48,101,102],{"class":84},"))\n",[38,104,107],{"className":40,"code":105,"language":42,"meta":106,"style":43},"\u002F**\n * 簡易版 deepClone\n * 有許多 Edge cases 沒有考慮到，\n * 如果是產品的見還是用 loadsh的 _.cloneDeep 比較保險\n *\n * 用遞歸的方式判斷假如是object就不斷在進到下一層，\n * 若不是object的話就賦值給 target\n * @param {Object} source\n * @returns {Object}\n *\u002F\nexport function deepClone(source) {\n  if (!source && typeof source !== 'object') {\n    throw new Error('Error arguments', 'deepClone')\n  }\n  \u002F\u002F 可以用 source.constructor 或是 Array.isArray(source) 來判斷是 Array 還是 Object\n  const target = source.constructor === Array ? [] : {}\n  Object.keys(source).forEach((keys) => {\n    if (source[keys] && typeof source[keys] === 'object') {\n      target[keys] = deepClone(source[keys])\n    } else {\n      target[keys] = source[keys]\n    }\n  })\n  return target\n}\n","showLineNumbers",[45,108,109,114,119,125,131,137,143,149,174,189,195,221,264,297,303,309,346,381,423,451,462,484,490,496,506],{"__ignoreMap":43},[48,110,111],{"class":50,"line":51},[48,112,113],{"class":54},"\u002F**\n",[48,115,116],{"class":50,"line":58},[48,117,118],{"class":54}," * 簡易版 deepClone\n",[48,120,122],{"class":50,"line":121},3,[48,123,124],{"class":54}," * 有許多 Edge cases 沒有考慮到，\n",[48,126,128],{"class":50,"line":127},4,[48,129,130],{"class":54}," * 如果是產品的見還是用 loadsh的 _.cloneDeep 比較保險\n",[48,132,134],{"class":50,"line":133},5,[48,135,136],{"class":54}," *\n",[48,138,140],{"class":50,"line":139},6,[48,141,142],{"class":54}," * 用遞歸的方式判斷假如是object就不斷在進到下一層，\n",[48,144,146],{"class":50,"line":145},7,[48,147,148],{"class":54}," * 若不是object的話就賦值給 target\n",[48,150,152,155,159,163,167,170],{"class":50,"line":151},8,[48,153,154],{"class":54}," * ",[48,156,158],{"class":157},"se7cl","@param",[48,160,162],{"class":161},"sHKXH"," {",[48,164,166],{"class":165},"s6uJR","Object",[48,168,169],{"class":161},"}",[48,171,173],{"class":172},"sWJqL"," source\n",[48,175,177,179,182,184,186],{"class":50,"line":176},9,[48,178,154],{"class":54},[48,180,181],{"class":157},"@returns",[48,183,162],{"class":161},[48,185,166],{"class":165},[48,187,188],{"class":161},"}\n",[48,190,192],{"class":50,"line":191},10,[48,193,194],{"class":54}," *\u002F\n",[48,196,198,202,206,209,211,215,218],{"class":50,"line":197},11,[48,199,201],{"class":200},"swGrk","export",[48,203,205],{"class":204},"s5MyL"," function",[48,207,208],{"class":80}," deepClone",[48,210,85],{"class":84},[48,212,214],{"class":213},"s_ePm","source",[48,216,217],{"class":84},")",[48,219,220],{"class":84}," {\n",[48,222,224,228,231,235,237,240,244,247,250,254,258,261],{"class":50,"line":223},12,[48,225,227],{"class":226},"swp_B","  if",[48,229,230],{"class":84}," (",[48,232,234],{"class":233},"sny2E","!",[48,236,214],{"class":98},[48,238,239],{"class":233}," &&",[48,241,243],{"class":242},"s00W4"," typeof",[48,245,246],{"class":98}," source",[48,248,249],{"class":233}," !==",[48,251,253],{"class":252},"sq7Q2"," '",[48,255,257],{"class":256},"s58z3","object",[48,259,260],{"class":252},"'",[48,262,263],{"class":84},") {\n",[48,265,267,270,273,276,278,280,283,285,288,290,292,294],{"class":50,"line":266},13,[48,268,269],{"class":226},"    throw",[48,271,272],{"class":242}," new",[48,274,275],{"class":80}," Error",[48,277,85],{"class":84},[48,279,260],{"class":252},[48,281,282],{"class":256},"Error arguments",[48,284,260],{"class":252},[48,286,287],{"class":69},",",[48,289,253],{"class":252},[48,291,20],{"class":256},[48,293,260],{"class":252},[48,295,296],{"class":84},")\n",[48,298,300],{"class":50,"line":299},14,[48,301,302],{"class":84},"  }\n",[48,304,306],{"class":50,"line":305},15,[48,307,308],{"class":54},"  \u002F\u002F 可以用 source.constructor 或是 Array.isArray(source) 來判斷是 Array 還是 Object\n",[48,310,312,315,318,320,322,324,328,331,334,337,340,343],{"class":50,"line":311},16,[48,313,314],{"class":61},"  const",[48,316,317],{"class":65}," target",[48,319,70],{"class":69},[48,321,246],{"class":98},[48,323,77],{"class":69},[48,325,327],{"class":326},"se0OL","constructor",[48,329,330],{"class":233}," ===",[48,332,333],{"class":98}," Array",[48,335,336],{"class":233}," ?",[48,338,339],{"class":84}," [] ",[48,341,342],{"class":233},":",[48,344,345],{"class":84}," {}\n",[48,347,349,352,354,357,359,361,363,365,368,371,373,376,379],{"class":50,"line":348},17,[48,350,351],{"class":98},"  Object",[48,353,77],{"class":69},[48,355,356],{"class":80},"keys",[48,358,85],{"class":84},[48,360,214],{"class":98},[48,362,217],{"class":84},[48,364,77],{"class":69},[48,366,367],{"class":80},"forEach",[48,369,370],{"class":84},"((",[48,372,356],{"class":213},[48,374,375],{"class":84},") ",[48,377,378],{"class":204},"=>",[48,380,220],{"class":84},[48,382,384,387,389,391,394,396,399,402,404,406,408,410,412,415,417,419,421],{"class":50,"line":383},18,[48,385,386],{"class":226},"    if",[48,388,230],{"class":84},[48,390,214],{"class":98},[48,392,393],{"class":84},"[",[48,395,356],{"class":326},[48,397,398],{"class":84},"] ",[48,400,401],{"class":233},"&&",[48,403,243],{"class":242},[48,405,246],{"class":98},[48,407,393],{"class":84},[48,409,356],{"class":326},[48,411,398],{"class":84},[48,413,414],{"class":233},"===",[48,416,253],{"class":252},[48,418,257],{"class":256},[48,420,260],{"class":252},[48,422,263],{"class":84},[48,424,426,429,431,433,435,438,440,442,444,446,448],{"class":50,"line":425},19,[48,427,428],{"class":98},"      target",[48,430,393],{"class":84},[48,432,356],{"class":326},[48,434,398],{"class":84},[48,436,437],{"class":69},"=",[48,439,208],{"class":80},[48,441,85],{"class":84},[48,443,214],{"class":98},[48,445,393],{"class":84},[48,447,356],{"class":326},[48,449,450],{"class":84},"])\n",[48,452,454,457,460],{"class":50,"line":453},20,[48,455,456],{"class":84},"    } ",[48,458,459],{"class":226},"else",[48,461,220],{"class":84},[48,463,465,467,469,471,473,475,477,479,481],{"class":50,"line":464},21,[48,466,428],{"class":98},[48,468,393],{"class":84},[48,470,356],{"class":326},[48,472,398],{"class":84},[48,474,437],{"class":69},[48,476,246],{"class":98},[48,478,393],{"class":84},[48,480,356],{"class":326},[48,482,483],{"class":84},"]\n",[48,485,487],{"class":50,"line":486},22,[48,488,489],{"class":84},"    }\n",[48,491,493],{"class":50,"line":492},23,[48,494,495],{"class":84},"  })\n",[48,497,499,503],{"class":50,"line":498},24,[48,500,502],{"class":501},"svvEX","  return",[48,504,505],{"class":98}," target\n",[48,507,509],{"class":50,"line":508},25,[48,510,188],{"class":84},[13,512,513],{},"延伸問題：",[515,516,517],"ul",{},[518,519,520],"li",{},"有哪些 function(filter、map、slice、splice)實作出來是 deep copy ? 、哪些是 shallow copy ?",[17,522,523],{"id":523},"debounce",[13,525,526],{},"請實作一個 debounce 的 function，以及請說明 debounce 的應用場合",[38,528,530],{"className":40,"code":529,"language":42,"meta":106,"style":43},"\u002F**\n * 簡易版\n * @param {Function} func func The function to debounce.\n * @param {number} wait\n * @return {Function} Returns the new debounced function.\n *\u002F\nfunction debounce(fun, delay) {\n  return function (args) {\n    let that = this\n    let _args = args\n    \u002F\u002F 每次執行的時候重置setTimeout\n    clearTimeout(fun.time)\n    fun.time = setTimeout(function () {\n      \u002F\u002F 執行傳入的fun1(透過call方法傳遞參數_args)\n      fun.call(that, _args)\n    }, delay)\n  }\n}\n",[45,531,532,536,541,560,576,592,596,618,631,646,658,663,679,700,705,726,737,741],{"__ignoreMap":43},[48,533,534],{"class":50,"line":51},[48,535,113],{"class":54},[48,537,538],{"class":50,"line":58},[48,539,540],{"class":54}," * 簡易版\n",[48,542,543,545,547,549,552,554,557],{"class":50,"line":121},[48,544,154],{"class":54},[48,546,158],{"class":157},[48,548,162],{"class":161},[48,550,551],{"class":165},"Function",[48,553,169],{"class":161},[48,555,556],{"class":172}," func",[48,558,559],{"class":54}," func The function to debounce.\n",[48,561,562,564,566,568,571,573],{"class":50,"line":127},[48,563,154],{"class":54},[48,565,158],{"class":157},[48,567,162],{"class":161},[48,569,570],{"class":165},"number",[48,572,169],{"class":161},[48,574,575],{"class":172}," wait\n",[48,577,578,580,583,585,587,589],{"class":50,"line":133},[48,579,154],{"class":54},[48,581,582],{"class":157},"@return",[48,584,162],{"class":161},[48,586,551],{"class":165},[48,588,169],{"class":161},[48,590,591],{"class":54}," Returns the new debounced function.\n",[48,593,594],{"class":50,"line":139},[48,595,194],{"class":54},[48,597,598,601,604,606,609,611,614,616],{"class":50,"line":145},[48,599,600],{"class":204},"function",[48,602,603],{"class":80}," debounce",[48,605,85],{"class":84},[48,607,608],{"class":213},"fun",[48,610,287],{"class":69},[48,612,613],{"class":213}," delay",[48,615,217],{"class":84},[48,617,220],{"class":84},[48,619,620,622,624,626,629],{"class":50,"line":151},[48,621,502],{"class":501},[48,623,205],{"class":204},[48,625,230],{"class":84},[48,627,628],{"class":213},"args",[48,630,263],{"class":84},[48,632,633,636,640,642],{"class":50,"line":176},[48,634,635],{"class":61},"    let",[48,637,639],{"class":638},"sY6z7"," that",[48,641,70],{"class":69},[48,643,645],{"class":644},"sDmOP"," this\n",[48,647,648,650,653,655],{"class":50,"line":191},[48,649,635],{"class":61},[48,651,652],{"class":638}," _args",[48,654,70],{"class":69},[48,656,657],{"class":98}," args\n",[48,659,660],{"class":50,"line":197},[48,661,662],{"class":54},"    \u002F\u002F 每次執行的時候重置setTimeout\n",[48,664,665,668,670,672,674,677],{"class":50,"line":223},[48,666,667],{"class":80},"    clearTimeout",[48,669,85],{"class":84},[48,671,608],{"class":98},[48,673,77],{"class":69},[48,675,676],{"class":326},"time",[48,678,296],{"class":84},[48,680,681,684,686,688,690,693,695,697],{"class":50,"line":266},[48,682,683],{"class":98},"    fun",[48,685,77],{"class":69},[48,687,676],{"class":326},[48,689,70],{"class":69},[48,691,692],{"class":80}," setTimeout",[48,694,85],{"class":84},[48,696,600],{"class":204},[48,698,699],{"class":84}," () {\n",[48,701,702],{"class":50,"line":299},[48,703,704],{"class":54},"      \u002F\u002F 執行傳入的fun1(透過call方法傳遞參數_args)\n",[48,706,707,710,712,715,717,720,722,724],{"class":50,"line":305},[48,708,709],{"class":98},"      fun",[48,711,77],{"class":69},[48,713,714],{"class":80},"call",[48,716,85],{"class":84},[48,718,719],{"class":98},"that",[48,721,287],{"class":69},[48,723,652],{"class":98},[48,725,296],{"class":84},[48,727,728,731,733,735],{"class":50,"line":311},[48,729,730],{"class":84},"    }",[48,732,287],{"class":69},[48,734,613],{"class":98},[48,736,296],{"class":84},[48,738,739],{"class":50,"line":348},[48,740,302],{"class":84},[48,742,743],{"class":50,"line":383},[48,744,188],{"class":84},[38,746,748],{"className":40,"code":747,"language":42,"meta":106,"style":43},"\u002F**\n * 簡易版 + 立即執行\n * @param {Function} func func The function to debounce.\n * @param {number} wait\n * @param {boolean} immediate is immediate execute\n * @return {Function} Returns the new debounced function.\n *\u002F\nfunction debounce(func, wait, immediate) {\n  let timeout, args, context, timestamp, result\n\n  const later = function () {\n    \u002F\u002F 據上一次觸發時間間隔\n    const last = +new Date() - timestamp\n\n    \u002F\u002F 上次被包裝函數被調用時間間隔 last 小於設定時間間隔 wait\n    if (last \u003C wait && last > 0) {\n      timeout = setTimeout(later, wait - last)\n    } else {\n      timeout = null\n      \u002F\u002F 如果設定為 immediate === true，因為開始邊界已經調用過了此處無需調用\n      if (!immediate) {\n        result = func.apply(context, args)\n        if (!timeout) context = args = null\n      }\n    }\n  }\n\n  return function (...args) {\n    context = this\n    timestamp = +new Date()\n    const callNow = immediate && !timeout\n    \u002F\u002F 如果延時不存在，重新設定延時\n    if (!timeout) timeout = setTimeout(later, wait)\n    if (callNow) {\n      result = func.apply(context, args)\n      context = args = null\n    }\n\n    return result\n  }\n}\n",[45,749,750,754,759,775,789,808,822,826,850,878,884,897,902,930,934,939,966,991,999,1009,1014,1028,1053,1077,1082,1086,1091,1096,1113,1123,1140,1160,1166,1195,1207,1231,1245,1250,1255,1263,1268],{"__ignoreMap":43},[48,751,752],{"class":50,"line":51},[48,753,113],{"class":54},[48,755,756],{"class":50,"line":58},[48,757,758],{"class":54}," * 簡易版 + 立即執行\n",[48,760,761,763,765,767,769,771,773],{"class":50,"line":121},[48,762,154],{"class":54},[48,764,158],{"class":157},[48,766,162],{"class":161},[48,768,551],{"class":165},[48,770,169],{"class":161},[48,772,556],{"class":172},[48,774,559],{"class":54},[48,776,777,779,781,783,785,787],{"class":50,"line":127},[48,778,154],{"class":54},[48,780,158],{"class":157},[48,782,162],{"class":161},[48,784,570],{"class":165},[48,786,169],{"class":161},[48,788,575],{"class":172},[48,790,791,793,795,797,800,802,805],{"class":50,"line":133},[48,792,154],{"class":54},[48,794,158],{"class":157},[48,796,162],{"class":161},[48,798,799],{"class":165},"boolean",[48,801,169],{"class":161},[48,803,804],{"class":172}," immediate",[48,806,807],{"class":54}," is immediate execute\n",[48,809,810,812,814,816,818,820],{"class":50,"line":139},[48,811,154],{"class":54},[48,813,582],{"class":157},[48,815,162],{"class":161},[48,817,551],{"class":165},[48,819,169],{"class":161},[48,821,591],{"class":54},[48,823,824],{"class":50,"line":145},[48,825,194],{"class":54},[48,827,828,830,832,834,837,839,842,844,846,848],{"class":50,"line":151},[48,829,600],{"class":204},[48,831,603],{"class":80},[48,833,85],{"class":84},[48,835,836],{"class":213},"func",[48,838,287],{"class":69},[48,840,841],{"class":213}," wait",[48,843,287],{"class":69},[48,845,804],{"class":213},[48,847,217],{"class":84},[48,849,220],{"class":84},[48,851,852,855,858,860,863,865,868,870,873,875],{"class":50,"line":176},[48,853,854],{"class":61},"  let",[48,856,857],{"class":638}," timeout",[48,859,287],{"class":69},[48,861,862],{"class":638}," args",[48,864,287],{"class":69},[48,866,867],{"class":638}," context",[48,869,287],{"class":69},[48,871,872],{"class":638}," timestamp",[48,874,287],{"class":69},[48,876,877],{"class":638}," result\n",[48,879,880],{"class":50,"line":191},[48,881,883],{"emptyLinePlaceholder":882},true,"\n",[48,885,886,888,891,893,895],{"class":50,"line":197},[48,887,314],{"class":61},[48,889,890],{"class":80}," later",[48,892,70],{"class":69},[48,894,205],{"class":204},[48,896,699],{"class":84},[48,898,899],{"class":50,"line":223},[48,900,901],{"class":54},"    \u002F\u002F 據上一次觸發時間間隔\n",[48,903,904,907,910,912,915,918,921,924,927],{"class":50,"line":266},[48,905,906],{"class":61},"    const",[48,908,909],{"class":65}," last",[48,911,70],{"class":69},[48,913,914],{"class":69}," +",[48,916,917],{"class":242},"new",[48,919,920],{"class":80}," Date",[48,922,923],{"class":84},"() ",[48,925,926],{"class":69},"-",[48,928,929],{"class":98}," timestamp\n",[48,931,932],{"class":50,"line":299},[48,933,883],{"emptyLinePlaceholder":882},[48,935,936],{"class":50,"line":305},[48,937,938],{"class":54},"    \u002F\u002F 上次被包裝函數被調用時間間隔 last 小於設定時間間隔 wait\n",[48,940,941,943,945,948,951,953,955,957,960,964],{"class":50,"line":311},[48,942,386],{"class":226},[48,944,230],{"class":84},[48,946,947],{"class":98},"last",[48,949,950],{"class":233}," \u003C",[48,952,841],{"class":98},[48,954,239],{"class":233},[48,956,909],{"class":98},[48,958,959],{"class":233}," >",[48,961,963],{"class":962},"sjYsg"," 0",[48,965,263],{"class":84},[48,967,968,971,973,975,977,980,982,984,987,989],{"class":50,"line":348},[48,969,970],{"class":98},"      timeout",[48,972,70],{"class":69},[48,974,692],{"class":80},[48,976,85],{"class":84},[48,978,979],{"class":98},"later",[48,981,287],{"class":69},[48,983,841],{"class":98},[48,985,986],{"class":69}," -",[48,988,909],{"class":98},[48,990,296],{"class":84},[48,992,993,995,997],{"class":50,"line":383},[48,994,456],{"class":84},[48,996,459],{"class":226},[48,998,220],{"class":84},[48,1000,1001,1003,1005],{"class":50,"line":425},[48,1002,970],{"class":98},[48,1004,70],{"class":69},[48,1006,1008],{"class":1007},"s0ObY"," null\n",[48,1010,1011],{"class":50,"line":453},[48,1012,1013],{"class":54},"      \u002F\u002F 如果設定為 immediate === true，因為開始邊界已經調用過了此處無需調用\n",[48,1015,1016,1019,1021,1023,1026],{"class":50,"line":464},[48,1017,1018],{"class":226},"      if",[48,1020,230],{"class":84},[48,1022,234],{"class":233},[48,1024,1025],{"class":98},"immediate",[48,1027,263],{"class":84},[48,1029,1030,1033,1035,1037,1039,1042,1044,1047,1049,1051],{"class":50,"line":486},[48,1031,1032],{"class":98},"        result",[48,1034,70],{"class":69},[48,1036,556],{"class":98},[48,1038,77],{"class":69},[48,1040,1041],{"class":80},"apply",[48,1043,85],{"class":84},[48,1045,1046],{"class":98},"context",[48,1048,287],{"class":69},[48,1050,862],{"class":98},[48,1052,296],{"class":84},[48,1054,1055,1058,1060,1062,1065,1067,1069,1071,1073,1075],{"class":50,"line":492},[48,1056,1057],{"class":226},"        if",[48,1059,230],{"class":84},[48,1061,234],{"class":233},[48,1063,1064],{"class":98},"timeout",[48,1066,375],{"class":84},[48,1068,1046],{"class":98},[48,1070,70],{"class":69},[48,1072,862],{"class":98},[48,1074,70],{"class":69},[48,1076,1008],{"class":1007},[48,1078,1079],{"class":50,"line":498},[48,1080,1081],{"class":84},"      }\n",[48,1083,1084],{"class":50,"line":508},[48,1085,489],{"class":84},[48,1087,1089],{"class":50,"line":1088},26,[48,1090,302],{"class":84},[48,1092,1094],{"class":50,"line":1093},27,[48,1095,883],{"emptyLinePlaceholder":882},[48,1097,1099,1101,1103,1105,1109,1111],{"class":50,"line":1098},28,[48,1100,502],{"class":501},[48,1102,205],{"class":204},[48,1104,230],{"class":84},[48,1106,1108],{"class":1107},"sk53b","...",[48,1110,628],{"class":213},[48,1112,263],{"class":84},[48,1114,1116,1119,1121],{"class":50,"line":1115},29,[48,1117,1118],{"class":98},"    context",[48,1120,70],{"class":69},[48,1122,645],{"class":644},[48,1124,1126,1129,1131,1133,1135,1137],{"class":50,"line":1125},30,[48,1127,1128],{"class":98},"    timestamp",[48,1130,70],{"class":69},[48,1132,914],{"class":69},[48,1134,917],{"class":242},[48,1136,920],{"class":80},[48,1138,1139],{"class":84},"()\n",[48,1141,1143,1145,1148,1150,1152,1154,1157],{"class":50,"line":1142},31,[48,1144,906],{"class":61},[48,1146,1147],{"class":65}," callNow",[48,1149,70],{"class":69},[48,1151,804],{"class":98},[48,1153,239],{"class":233},[48,1155,1156],{"class":233}," !",[48,1158,1159],{"class":98},"timeout\n",[48,1161,1163],{"class":50,"line":1162},32,[48,1164,1165],{"class":54},"    \u002F\u002F 如果延時不存在，重新設定延時\n",[48,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193],{"class":50,"line":1168},33,[48,1170,386],{"class":226},[48,1172,230],{"class":84},[48,1174,234],{"class":233},[48,1176,1064],{"class":98},[48,1178,375],{"class":84},[48,1180,1064],{"class":98},[48,1182,70],{"class":69},[48,1184,692],{"class":80},[48,1186,85],{"class":84},[48,1188,979],{"class":98},[48,1190,287],{"class":69},[48,1192,841],{"class":98},[48,1194,296],{"class":84},[48,1196,1198,1200,1202,1205],{"class":50,"line":1197},34,[48,1199,386],{"class":226},[48,1201,230],{"class":84},[48,1203,1204],{"class":98},"callNow",[48,1206,263],{"class":84},[48,1208,1210,1213,1215,1217,1219,1221,1223,1225,1227,1229],{"class":50,"line":1209},35,[48,1211,1212],{"class":98},"      result",[48,1214,70],{"class":69},[48,1216,556],{"class":98},[48,1218,77],{"class":69},[48,1220,1041],{"class":80},[48,1222,85],{"class":84},[48,1224,1046],{"class":98},[48,1226,287],{"class":69},[48,1228,862],{"class":98},[48,1230,296],{"class":84},[48,1232,1234,1237,1239,1241,1243],{"class":50,"line":1233},36,[48,1235,1236],{"class":98},"      context",[48,1238,70],{"class":69},[48,1240,862],{"class":98},[48,1242,70],{"class":69},[48,1244,1008],{"class":1007},[48,1246,1248],{"class":50,"line":1247},37,[48,1249,489],{"class":84},[48,1251,1253],{"class":50,"line":1252},38,[48,1254,883],{"emptyLinePlaceholder":882},[48,1256,1258,1261],{"class":50,"line":1257},39,[48,1259,1260],{"class":501},"    return",[48,1262,877],{"class":98},[48,1264,1266],{"class":50,"line":1265},40,[48,1267,302],{"class":84},[48,1269,1271],{"class":50,"line":1270},41,[48,1272,188],{"class":84},[1274,1275,1276],"h3",{"id":1276},"使用情境",[515,1278,1279,1282],{},[518,1280,1281],{},"監聽 resize 事件時，不用每次變動就立即執行 function，只要最後停止時在做計算即可",[518,1283,1284],{},"以 Search bar 的功能來說，不用使用者每輸入一個字都去 call API，只要最後停下來後再去要資料就好了",[17,1286,1288],{"id":1287},"throttle","Throttle",[38,1290,1292],{"className":40,"code":1291,"language":42,"meta":106,"style":43},"function throttle(func, timeout = 250) {\n  let last\n  let timer\n\n  return function () {\n    const context = this\n    const args = arguments\n    const now = +new Date()\n\n    if (last && now \u003C last + timeout) {\n      clearTimeout(timer)\n      timer = setTimeout(function () {\n        last = now\n        func.apply(context, args)\n      }, timeout)\n    } else {\n      last = now\n      func.apply(context, args)\n    }\n  }\n}\n",[45,1293,1294,1318,1325,1332,1336,1344,1354,1365,1382,1386,1408,1420,1435,1445,1464,1475,1483,1492,1511,1515,1519],{"__ignoreMap":43},[48,1295,1296,1298,1301,1303,1305,1307,1309,1311,1314,1316],{"class":50,"line":51},[48,1297,600],{"class":204},[48,1299,1300],{"class":80}," throttle",[48,1302,85],{"class":84},[48,1304,836],{"class":213},[48,1306,287],{"class":69},[48,1308,857],{"class":213},[48,1310,70],{"class":69},[48,1312,1313],{"class":962}," 250",[48,1315,217],{"class":84},[48,1317,220],{"class":84},[48,1319,1320,1322],{"class":50,"line":58},[48,1321,854],{"class":61},[48,1323,1324],{"class":638}," last\n",[48,1326,1327,1329],{"class":50,"line":121},[48,1328,854],{"class":61},[48,1330,1331],{"class":638}," timer\n",[48,1333,1334],{"class":50,"line":127},[48,1335,883],{"emptyLinePlaceholder":882},[48,1337,1338,1340,1342],{"class":50,"line":133},[48,1339,502],{"class":501},[48,1341,205],{"class":204},[48,1343,699],{"class":84},[48,1345,1346,1348,1350,1352],{"class":50,"line":139},[48,1347,906],{"class":61},[48,1349,867],{"class":65},[48,1351,70],{"class":69},[48,1353,645],{"class":644},[48,1355,1356,1358,1360,1362],{"class":50,"line":145},[48,1357,906],{"class":61},[48,1359,862],{"class":65},[48,1361,70],{"class":69},[48,1363,1364],{"class":644}," arguments\n",[48,1366,1367,1369,1372,1374,1376,1378,1380],{"class":50,"line":151},[48,1368,906],{"class":61},[48,1370,1371],{"class":65}," now",[48,1373,70],{"class":69},[48,1375,914],{"class":69},[48,1377,917],{"class":242},[48,1379,920],{"class":80},[48,1381,1139],{"class":84},[48,1383,1384],{"class":50,"line":176},[48,1385,883],{"emptyLinePlaceholder":882},[48,1387,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406],{"class":50,"line":191},[48,1389,386],{"class":226},[48,1391,230],{"class":84},[48,1393,947],{"class":98},[48,1395,239],{"class":233},[48,1397,1371],{"class":98},[48,1399,950],{"class":233},[48,1401,909],{"class":98},[48,1403,914],{"class":69},[48,1405,857],{"class":98},[48,1407,263],{"class":84},[48,1409,1410,1413,1415,1418],{"class":50,"line":197},[48,1411,1412],{"class":80},"      clearTimeout",[48,1414,85],{"class":84},[48,1416,1417],{"class":98},"timer",[48,1419,296],{"class":84},[48,1421,1422,1425,1427,1429,1431,1433],{"class":50,"line":223},[48,1423,1424],{"class":98},"      timer",[48,1426,70],{"class":69},[48,1428,692],{"class":80},[48,1430,85],{"class":84},[48,1432,600],{"class":204},[48,1434,699],{"class":84},[48,1436,1437,1440,1442],{"class":50,"line":266},[48,1438,1439],{"class":98},"        last",[48,1441,70],{"class":69},[48,1443,1444],{"class":98}," now\n",[48,1446,1447,1450,1452,1454,1456,1458,1460,1462],{"class":50,"line":299},[48,1448,1449],{"class":98},"        func",[48,1451,77],{"class":69},[48,1453,1041],{"class":80},[48,1455,85],{"class":84},[48,1457,1046],{"class":98},[48,1459,287],{"class":69},[48,1461,862],{"class":98},[48,1463,296],{"class":84},[48,1465,1466,1469,1471,1473],{"class":50,"line":305},[48,1467,1468],{"class":84},"      }",[48,1470,287],{"class":69},[48,1472,857],{"class":98},[48,1474,296],{"class":84},[48,1476,1477,1479,1481],{"class":50,"line":311},[48,1478,456],{"class":84},[48,1480,459],{"class":226},[48,1482,220],{"class":84},[48,1484,1485,1488,1490],{"class":50,"line":348},[48,1486,1487],{"class":98},"      last",[48,1489,70],{"class":69},[48,1491,1444],{"class":98},[48,1493,1494,1497,1499,1501,1503,1505,1507,1509],{"class":50,"line":383},[48,1495,1496],{"class":98},"      func",[48,1498,77],{"class":69},[48,1500,1041],{"class":80},[48,1502,85],{"class":84},[48,1504,1046],{"class":98},[48,1506,287],{"class":69},[48,1508,862],{"class":98},[48,1510,296],{"class":84},[48,1512,1513],{"class":50,"line":425},[48,1514,489],{"class":84},[48,1516,1517],{"class":50,"line":453},[48,1518,302],{"class":84},[48,1520,1521],{"class":50,"line":464},[48,1522,188],{"class":84},[1274,1524,1276],{"id":1525},"使用情境-1",[515,1527,1528],{},[518,1529,1530],{},"有個 button 有綁定 click 事件，若沒有 throttle 在不斷點擊按鈕，會按幾次就觸發幾次，用 throttle 可以有效限制在固定時間內只會觸發一次而已",[1532,1533,1534],"style",{},"html pre.shiki code .shM36, html code.shiki .shM36{--shiki-default:#008000;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .sucPa, html code.shiki .sucPa{--shiki-default:#0000FF;--shiki-default-font-style:inherit;--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic}html pre.shiki code .sq2Xa, html code.shiki .sq2Xa{--shiki-default:#0070C1;--shiki-dark:#BB9AF7}html pre.shiki code .s6v6z, html code.shiki .s6v6z{--shiki-default:#000000;--shiki-dark:#89DDFF}html pre.shiki code .s1TMK, html code.shiki .s1TMK{--shiki-default:#0070C1;--shiki-dark:#0DB9D7}html pre.shiki code .sjNAT, html code.shiki .sjNAT{--shiki-default:#795E26;--shiki-dark:#7AA2F7}html pre.shiki code .sNwUV, html code.shiki .sNwUV{--shiki-default:#000000;--shiki-dark:#9ABDF5}html pre.shiki code .sJUHq, html code.shiki .sJUHq{--shiki-default:#001080;--shiki-dark:#C0CAF5}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .se7cl, html code.shiki .se7cl{--shiki-default:#0000FF;--shiki-default-font-style:inherit;--shiki-dark:#646E9C;--shiki-dark-font-style:italic}html pre.shiki code .sHKXH, html code.shiki .sHKXH{--shiki-default:#267F99;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .s6uJR, html code.shiki .s6uJR{--shiki-default:#267F99;--shiki-default-font-style:inherit;--shiki-dark:#646E9C;--shiki-dark-font-style:italic}html pre.shiki code .sWJqL, html code.shiki .sWJqL{--shiki-default:#001080;--shiki-default-font-style:inherit;--shiki-dark:#5A638C;--shiki-dark-font-style:italic}html pre.shiki code .swGrk, html code.shiki .swGrk{--shiki-default:#AF00DB;--shiki-dark:#7DCFFF}html pre.shiki code .s5MyL, html code.shiki .s5MyL{--shiki-default:#0000FF;--shiki-dark:#BB9AF7}html pre.shiki code .s_ePm, html code.shiki .s_ePm{--shiki-default:#001080;--shiki-dark:#E0AF68}html pre.shiki code .swp_B, html code.shiki .swp_B{--shiki-default:#AF00DB;--shiki-dark:#BB9AF7}html pre.shiki code .sny2E, html code.shiki .sny2E{--shiki-default:#000000;--shiki-dark:#BB9AF7}html pre.shiki code .s00W4, html code.shiki .s00W4{--shiki-default:#0000FF;--shiki-dark:#89DDFF}html pre.shiki code .sq7Q2, html code.shiki .sq7Q2{--shiki-default:#A31515;--shiki-dark:#89DDFF}html pre.shiki code .s58z3, html code.shiki .s58z3{--shiki-default:#A31515;--shiki-dark:#9ECE6A}html pre.shiki code .se0OL, html code.shiki .se0OL{--shiki-default:#001080;--shiki-dark:#7DCFFF}html pre.shiki code .svvEX, html code.shiki .svvEX{--shiki-default:#AF00DB;--shiki-default-font-style:inherit;--shiki-dark:#BB9AF7;--shiki-dark-font-style:italic}html pre.shiki code .sY6z7, html code.shiki .sY6z7{--shiki-default:#001080;--shiki-dark:#BB9AF7}html pre.shiki code .sDmOP, html code.shiki .sDmOP{--shiki-default:#0000FF;--shiki-dark:#F7768E}html pre.shiki code .sjYsg, html code.shiki .sjYsg{--shiki-default:#098658;--shiki-dark:#FF9E64}html pre.shiki code .s0ObY, html code.shiki .s0ObY{--shiki-default:#0000FF;--shiki-dark:#FF9E64}html pre.shiki code .sk53b, html code.shiki .sk53b{--shiki-default:#000000;--shiki-default-font-weight:inherit;--shiki-dark:#F7768E;--shiki-dark-font-weight:bold}",{"title":43,"searchDepth":58,"depth":58,"links":1536},[1537,1538,1541],{"id":19,"depth":58,"text":20},{"id":523,"depth":58,"text":523,"children":1539},[1540],{"id":1276,"depth":121,"text":1276},{"id":1287,"depth":58,"text":1288,"children":1542},[1543],{"id":1525,"depth":121,"text":1276},"2023-01-18","md",false,"\u002Fimages\u002Fpost\u002Fcommon-frontend-interview-questions\u002Finterview.webp",{},"\u002Fpost\u002Fcommon-frontend-interview-questions",{"title":5,"description":43},{"loc":1549},"post\u002Fcommon-frontend-interview-questions","大陸面試題常考的八股文題目",[1555,1556,1557],"interview","interview questions","frontend interview","7HdKhKsvYN5bSNTdn4IcS7pl4isiyZq95BL2Ld0TRKg",1791370767063]