hook-setInterval定时器

最新推荐文章于 2023-09-27 14:39:22 发布
最新推荐文章于 2023-09-27 14:39:22 发布
阅读量1.2k 收藏
点赞数
分类专栏： web逆向 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49859373/article/details/122192556
版权
这篇博客探讨了如何利用Hook技术来绕过JavaScript中的定时器，以便在控制台打印预期内容。当遇到断点在setInterval内无法阻止定时器执行的问题时，通过重新定义setInterval函数为空实现阻断。关键在于确保断点设置在定时器启动之前，然后实施hook操作。最终成功阻止了定时器循环并获取了所需结果。
摘要由CSDN通过智能技术生成

​ 目标网站:aHR0cDovL3NwaWRlci53YW5nbHVvemhlLmNvbS9jaGFsbGVuZ2UvNQ

背景:
本题为hook初体验，目标是用hook的方式过掉定时器，成功在控制台中打印出我们想要的内容。
在这里插入图片描述

表现形式：

1.一进入页面就狂刷div在这里插入图片描述
2.随后我们追踪到js内找到console的位置

在这里插入图片描述
此时断点直接断住，但我们发现一直console的代码段是保存在setInterval的定时器内的。
解决方案：
我们可以通过hook 的方式将定时器置空，从而阻断定时器代码执行。

setInterval = funtion(){}

注意点:
当我们已经进入定时器的循环时，我们是无法从新定义他的。所以我们的断点一定要放到，在定时器启动前的位置然后进行hook.接下来我们打下断点然后刷新页面，断点停止在了定时器定义前面，这是我们进行hook即可。
在这里插入图片描述
获取结果：
在这里插入图片描述

学狙人。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-timer-hook:React计时器挂钩
04-17
React计时器挂钩 React timer hook是一个自定义的 ，用于处理react组件中的计时器，秒表和时间逻辑/状态。 useTimer ：计时器（倒数计时器） useStopwatch ：秒表（计时器） useTime ：时间（返回当前时间） 设置 yarn add react-timer-hook或npm install --save react-timer-hook useTimer 例子 import React from 'react' ; import { useTimer } from 'react-timer-hook' ; function MyTimer ( { expiryTimestamp } ) { const { seconds , minutes , hours , days , isRunning
通过 React Hooks 声明式地使用 setInterval
weixin_33709609的博客
02-20 274
本文由云+社区发表作者：Dan Abramov 接触 React Hooks 一定时间的你，也许会碰到一个神奇的问题: setInterval 用起来没你想的简单。 Ryan Florence 在他的推文里面说到： 不少朋友跟我提起，setInterval 和 hooks 一起用的时候，有种蛋蛋的忧伤。 老实说，这些朋友也不是胡扯。刚开...
React hook 中，使用setInterval定时器，制作时、分、秒倒计时功能
周气气的博客
02-04 3215
需求：后台返回截止日期时间戳，根据当前时间，页面回显精确到秒的倒计时。 **思路：**抽一个countDown组件，传入截止时间timeStamp，使用setInterval进行倒计时，render页面。 **遇到的问题：**在useEffect中，新值只变化一次，没有实时的倒计时。 参考文章： useEffect 完整指南 解决方案： 最开始将时分秒作为整体time返回，发现页面没有实时变化。然后将变化后的时间作为useEffcet的依赖，这样页面会动态显示倒计时，但是这样做会一直创建不同的setI
消息钩子与定时器(VC_Win32)
diaogui7903的博客
11-14 213
目录 消息钩子 定时器 (本章节中例子都是用 VS2005 编译调试的) 消息钩子 [概述][相关函数][编写消息钩子] 概述 钩子过程 操作系统在传递消息时,将我们感兴趣的消息先传递给HOOK过程,在此函数中进行检查,然后在决定是否放行该消息,就好像逃犯在逃亡时可能会经过许多段路段,为了抓住他,警察要在某些地方设置检查站,以便检查过往的车辆和行人,我们可以...
React Hooks与setInterval
大灰狼的小绵羊哥哥的博客
11-08 2006
前言 Hooks出来已经有段时间了，相信大家都用过段时间了，有没有小伙伴们遇到坑呢，我这边就有个setInterval的坑，和小伙伴们分享下解决方案。 问题 写个count每秒自增的定时器，如下写法结果，界面上count为1？ function Counter() { let [count, setCount] = useState(0); useEffect(() => ...
Vue清除定时器setInterval优化方案分享
11-20
定时器，如`setInterval`，常常用于实现周期性的任务，但如果不正确地处理，可能会导致内存泄漏，影响应用的性能。本文将探讨两种清除定时器的方案，并重点推荐方案2。 ### 方案1：基于data属性管理定时器 在Vue...
React-Advanced-Timer
02-20
同时，我们可以利用生命周期方法，如`componentDidMount`，启动定时器，`componentDidUpdate`或`useEffect`来更新时间，并在`componentWillUnmount`时清除定时器，以防止内存泄漏。 3. **JSX语法**： React使用JSX...
analogue-clock
05-31
useState是一个内置的React hook，用于在函数组件中添加状态变量。在传统的React类组件中，我们使用this.state和this.setState来管理状态。而在函数组件中，useState使得我们可以声明状态变量并更新它。例如： ```...
20-React-Timer
05-22
在"20-React-Timer"项目中，开发者可能还会用到其他React Hook，如`useRef`（用于引用可变的值）或`useCallback`（用于优化性能，避免每次渲染时都创建新的回调函数）。此外，可能还会涉及到条件渲染、错误边界、...
ReactNativeCountDownButton封装的一个倒计时按钮
08-10
2. **定时器处理**：使用`setInterval`函数实现倒计时，每秒更新按钮的状态。需要注意的是，当组件卸载时，必须清除定时器以防止内存泄漏，这通常通过`useEffect` Hook的清理函数完成。 3. **样式自定义**：React ...
如何实现一个Interval Hook
weixin_33859844的博客
04-10 326
【React】如何实现一个Interval Hook useInterval(() => { // do something... }, 1000); 复制代码可能你看过也写过一些 react hook ，不过你对 hook 的种种行为真的了解吗？这篇文章为你剖析 hook 对比 class component “反常” 的那些事儿。 有了自带的 setInterval 为何还要再实现一...
[vue] setInterval 使用定时器timer及其清理hook:beforeDestory
qq_14993591的博客
07-06 291
监听事件hook:beforeDestroy Vue：使用定时器timer及其清理hook:beforeDestory
「React」React Hooks与setInterval的踩坑问题总结
老司机的后备箱
05-10 1548
一、需求 我们希望有一个每一秒自动+1的定时器 function Counter() { let [count, setCount] = useState(0); useEffect(() => { let id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); return <h1&gt
浏览器页面处于不活跃状态时setInterval不定时执行
最新发布
ZSLOGIN的博客
09-27 1518
项目要求，每隔15s定时请求后台接口以记录进度，离开当前窗口请求不结束，除非手动关闭。
小记：使用Hooks写了个定时器
Xpy 的博客
04-15 1989
计时器： 组价加载开始倒计时； 组件销毁需要清除倒计时，防止内存泄漏； 需要用到hooks的状态管理 useState 来及时更新ui； 用到setInterval来实现计时功能； 错误写法： const [count, setCount] = useState(6); // 2 倒计时 useEffect(()=>{ // 3 创建倒计时 timer = setInterval(() => { console.log(`count`, count) // 因为
HTML中详述setInterval（）方法与setTimeout（）方法区别
m0_46383618的博客
07-18 1541
setInterval（） 用法：setInterval（“方法名”，时间）; 作用：每隔一段时间执行一次方法。 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="查询" onclick="ju
JS调试与Hook技巧
Super-Coding的博客
06-07 1393
逆向Js 对js基本功并不会像想象中这么高， 但是一些调试与hook技巧是你必须要掌握的！ 会让你效率翻倍。 浏览器调试技巧 这里我所使用的是 谷歌浏览器 常用js储存与调用 场景： 假如你自己写了一套js代码，涵盖一些你自己常用的转码、加密、解密、宏操作等等，你在逆向js的时候经常用到你这些js代码， 但是你每次都去把代码拷贝出来运行，是不是有点繁琐呢？下面说一种长效保存代码到浏览器中的方法！ 优势在于有代码提示，随时调用方法如下： 这里我以添加 cryptoJs 为例 保存好后，记得右键 R.
JS逆向：常见无限Debugger以及绕过方法
wtchhb的博客
03-20 7059
Js逆向、爬虫技术、浏览器调试技术、JavaScript、Hook技术
react 使用自定义hooks封装不会反复创建的定时器（setInterval）
weixin_44441196的博客
05-11 1334
react 需要通过useRef来创建定时器，否则清不干净，每次去写太麻烦，简单封装一下，直接代码 自定义hooks import { useRef, useState } from 'react'; const useTimer = (step = 1) => { const timer = useRef(null) const [ num, setNum ] = useState(0) const start = () => { const timeout = se.
react hook实现定时器
08-31
使用 React Hook 实现定时器可以使用 `useState`, `useEffect` 和 `setTimeout` 或 `setInterval` 函数。下面是一个简单的示例： ```javascript import React, { useState, useEffect } from 'react'; function Timer() { const [count, setCount] = useState(0); useEffect(() => { const timer = setTimeout(() => { setCount(count + 1); }, 1000); return () => { clearTimeout(timer); }; }, [count]); return ( <div> <p>Count: {count}</p> </div> ); } ``` 在这个示例中，我们使用 `useState` 来创建一个名为 `count` 的状态，并将初始值设置为 0。然后，我们使用 `useEffect` 来启动一个定时器，每隔一秒更新一次 `count` 的值。在 `useEffect` 的清理函数中，我们清除定时器，以避免内存泄漏。 请注意，我们将 `count` 添加到依赖数组中，以便在 `count` 发生变化时重新创建定时器。这是为了确保定时器始终以正确的间隔运行。 最后，我们将 `count` 的值显示在组件中，以展示定时器的效果。你可以根据需求修改和扩展这个示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值