相关疑难解决方法(0)

浏览器上的Rerender视图使用React调整大小

在调整浏览器窗口大小时,如何让React重新渲染视图？

背景

我有一些块,我想在页面上单独布局,但我也希望它们在浏览器窗口更改时更新.最终结果将是Ben Holland的 Pinterest布局,但使用React编写的不仅仅是jQuery.我还有一段路要走.

码

这是我的应用程序:

var MyApp = React.createClass({
  //does the http get from the server
  loadBlocksFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      mimeType: 'textPlain',
      success: function(data) {
        this.setState({data: data.events});
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    this.loadBlocksFromServer();

  },    
  render: function() {
    return (
        <div>
      <Blocks data={this.state.data}/>
      </div>
    );
  }
});

React.renderComponent(
  <MyApp url="url_here"/>,
  document.getElementById('view')
)

Run Code Online (Sandbox Code Playgroud)

然后我有了Block组件(相当于Pin上面Pinterest示例中的一个):

var Block = React.createClass({
  render: function() {
    return ( …

Run Code Online (Sandbox Code Playgroud)

javascript resize reactjs

dig*_*ake

2018 04-27

275
推荐指数

15
解决办法

20万
查看次数

删除javascript中的按键延迟

我有以下问题:我正在尝试编写一个javascript游戏,并且该字符由箭头键控制.
问题是,当按下按键时,在第一次按键和重复按下之间存在短暂的延迟.
此外,当按下"右箭头键"并按住它,然后按下"向上箭头键"时,角色不会移动到右上角,而是停止向右移动并开始向上移动.
这是我正在使用的代码:

<body onLoad="Load()" onKeyDown="Pressed(event)">

Run Code Online (Sandbox Code Playgroud)

function Pressed(e) { 
        cxc = e.keyCode;
        if(cxc == 37)
            Move(-1,0);
        if(cxc == 38)
            Move(0,-1);
        if(cxc == 39)
            Move(1,0);
        if(cxc == 40)
            Move(0,1);
    }

有没有人有想法？

javascript events javascript-events

ale*_*lex

lucky-day

24
推荐指数

2
解决办法

2万
查看次数

Javascript OnScroll性能比较

所以,假设我想在滚动触发的网站上添加一些昂贵的操作.例如,我在我的jsfiddle中使用视差效果.

现在我继续阅读它不能直接绑定到事件,有时后面的片段应该更好.只是一些例子:

他们说的基本上不这样做:

  // Bad guy 1
  $(window).scroll( function() {
    animate(ex1);
  });

Run Code Online (Sandbox Code Playgroud)

或这个

  // Bad guy 2
  window.addEventListener('scroll', onScroll, false);
  function onScroll() {
    animate(ex2);
  }

Run Code Online (Sandbox Code Playgroud)

但是使用超时,间隔,requestAnimationFrame等等,例如:

  // Good guy
  $(window).scroll( function() {
   scrolling1 = true;
  });

  setInterval( function() {
    if (scrolling1) {
      scrolling1 = false;
      animate(ex3);
    }
  }, 50 );

Run Code Online (Sandbox Code Playgroud)

所以,我把上面链接中找到的选项添加到jsfiddle,试图通过在每个方法中添加一个计数器来比较它们,如下所示:

  // Test
  $(window).scroll( function() {
    counter = counter + 1;
    // output result of counter
    animate(ex1);
  });

Run Code Online (Sandbox Code Playgroud)

最好先检查完整的jsfiddle或使用旧的浏览器:Scrolltest(相同,只是没有上的jsfiddle)

结果:一切顺利运行的计算数量大致相同.如果我可以忍受波涛汹涌的效果,也许我可以保护一些资源.对于我读到的所有内容,这对我来说似乎合乎逻辑! …

javascript jquery scroll onscroll

use*_*091

2019 03-13

13
推荐指数

2
解决办法

1887
查看次数

为什么documentFragment不比重复DOM访问快？

我总是认为,不是为了性能原因而反复触摸DOM,我们应该使用a documentFragment来附加多个元素,然后将片段附加到文档中一次,而不是一次又一次地重复添加新元素进入DOM.

我一直在尝试使用Chrome的开发工具来分析这两种方法,使用此测试页面:

<button id="addRows">Add rows</button>
<table id="myTable"></table>

Run Code Online (Sandbox Code Playgroud)

测试1使用此代码向表中追加50000个新行:

let addRows = document.getElementById('addRows');
addRows.addEventListener('click', function () {
    for (let x = 0; x < 50000; x += 1) {
        let table = document.getElementById('myTable'),
            row = document.createElement('tr'),
            cell = document.createElement('td'),
            cell1 = cell.cloneNode(),
            cell2 = cell.cloneNode(),
            cell3 = cell.cloneNode();

        cell1.textContent = 'A';
        cell2.textContent = 'B';
        cell3.textContent = 'C';

        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        table.appendChild(row);
    }
});

Run Code Online (Sandbox Code Playgroud)

在Chrome的时间轴工具中录制时单击按钮会产生以下输出:

测试2使用此代码:

let addRows = document.getElementById('addRows');
addRows.addEventListener('click', function () {
    let table = document.getElementById('myTable'),
        cell = …

Run Code Online (Sandbox Code Playgroud)

javascript performance dom

dan*_*man

2017 04-22

7
推荐指数

2
解决办法

1507
查看次数

requestAnimationFrame循环不正确FPS

我有一个javascript函数,我的游戏循环(希望)每秒60次控制输入,绘图等.

目前编码的方式似乎总是在52左右,明显低于60 fps,即使没有其他事情发生,它甚至会下降到25-30 fps

function loop() {
    setTimeout(function () {
        requestAnimationFrame(loop);
        time += (1000 / 60);
        if (time % 600 == 0) {
            oldtick = tick;
            tick += 1;
            time = 0;
            aiMovement();
            combat();
        }
        context.clearRect(0, 0, c.width, c.height);
        drawMap();
        playerInput();
        movePlayer();
        drawEntities();
        drawPopups();
        var thisLoop = new Date;
        var fps = 1000 / (thisLoop - lastLoop);
        lastLoop = thisLoop;
        context.drawImage(cursor, mouse.x, mouse.y, 16, 16);
        context.fillStyle = "#ffff00";
        context.fillText("FPS: " + Math.floor(fps) + " Time: " + Math.floor(time) + " …

Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas

bai*_*omu

2017 04-13

5
推荐指数

1
解决办法

4791
查看次数

如何在分形绘制递归函数中创建延迟

我正在尝试 Eloquent JavaScript 中遇到的分形绘制递归函数。

我想为每个分支的绘制设置延迟 - 目的是在我修改此函数及其参数时可视化分支/递归调用的流程。

我setTimeout在下面的代码中使用的方式似乎不起作用，我很困惑为什么。

我希望cx.fillRect(...)每次延迟都会画一个分支；而不是堆叠在队列中，因为没有其他代码setTimeout需要等待。

下面我首先包含了工作分形绘制 html/js 代码，没有尝试包含延迟。第二段代码是我尝试包含setTimeout延迟。

我在使用的非工作尝试setTimeout：

<canvas width="600" height="300"></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");

  function branch(length, angle, scale) {
    setTimeout(() => {
      cx.fillRect(0, 0, 1, length);
      if (length < 8) return;
      cx.save();
      cx.translate(0, length);
      cx.rotate(-angle);
      branch(length * scale, angle, scale);
      cx.rotate(2 * angle);
      branch(length * scale, angle, scale);
      cx.restore();
    }, 80);
  }
  cx.translate(300, 0);
  branch(60, 0.5, 0.8);
</script>

Run Code Online (Sandbox Code Playgroud)

无延迟的工作代码：